TOGGLE - Sidebar Menu Panel
HTML
<div id="home">
<div id="panel" class="active">
<span>ssss</span>
<div id="dock">
<a><<span class="fa fa-prev""></span></a>
</div>
</div>
<div id="content">
cccc
</div>
</div>
CSS
#home {
border: 1px solid green;
display: flex;
margin: 10px;
height: 200px;
overflow:hidden;
}
#panel {
width: 10px;
background-color: red;
display: flex;
justify-content: flex-end;
}
#panel.active {
width: 210px;
}
#panel span {
width: 0px;
}
#panel.active span {
width: 200px;
}
#dock {
width: 10px;
background-color: green;
position:relative;
display:flex;
flex-direction:column;
justify-content: center;
}
#content {
background-color: yellow;
height: 200px;
flex:1;
}
JavaScript
$("#dock a").bind("click", function() {
$('#panel').toggleClass('active');
});