I am working on a three div with expand collapse functionality. When I expand one div, I want to set some image to the other divs. And when I go back to normal mode, I need the original content that was inside each 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>Example:- In normal Mode Works Fine https://i.sstatic.net/os2ou.png
Example 1:- While Expand div other two div I need to hide the content and show some glyphicons something like this image https://i.sstatic.net/iICLH.png