如果我在需要显示内容时单击展开，如何设置div的图像？

Question

我有一个带有展开折叠功能的三个div。如果我展开一个div，我需要将一些图像设置为另一个div。如果我回到正常模式，我需要原创div中存在内容

​

$("a.expansion-btn").click(function (){
  classes = this.className;
  var divNumber = classes.slice(-1);
   var toGetId = "#div-"+divNumber;
  if ($(toGetId).hasClass("expanded-div")){
   $(".normal-div").removeClass("compressed-div");
   $(".normal-div").removeClass("expanded-div");
  }
  else{
   $(".normal-div").removeClass("compressed-div");
   $(".normal-div").removeClass("expanded-div");
   $(".normal-div").addClass("compressed-div");
   $(toGetId).removeClass("compressed-div");
   $(toGetId).addClass("expanded-div");    
  }  
});

*{
  box-sizing:border-box;
}
.contenth1{
  height:20%;
}
.contenth2{
  height:70%;
}
.container{
  margin:0;
  padding:0;
  width:100%;
  height:400px;
}
.normal-div{
  width:33.33%;
  height:100%;
  position:relative;
  border:2px solid black;
  float:left;
}
.expanded-div{
    width:80%;
}
.compressed-div{
  width:10%;
}
#div-1{
   
}
#div-2{
   
}
#div-3{
  
}
a.expansion-btn{
  position:absolute;
  top:10px;
  right:10px;
  font-weight:bold;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="normal-div" id="div-1">
    <div class="contenth1">
      <a class="expansion-btn exp-1">click</a>
    </div >
    <div class="contenth2">one</div>
    </div>
  <div class="normal-div" id="div-2">
  <div class="contenth1">
      <a class="expansion-btn exp-2">click</a>
    </div>
    <div class="contenth2">two</div>
    </div>
  <div class="normal-div" id="div-3">
    <div class="contenth1">
      <a class="expansion-btn exp-3">click</a>
    </div>
    <div class="contenth2">three</div>
    </div>
  </div>

​

示例：-在正常模式下工作正常

​

示例1:-当展开div和其他两个div时，我需要隐藏内容并显示一些图标，比如下面的图片

​