$(document).ready(function () {
$("#toggle").click(function () {
if ($(this).data('name') == 'show') {
$("#sidebar").animate({
width: '10%'
}).hide()
$("#map").animate({
width: '89%'
});
$(this).data('name', 'hide')
} else {
$("#sidebar").animate({
width: '29%'
}).show()
$("#map").animate({
width: '70%'
});
$(this).data('name', 'show')
}
});
});
html, body {
width:100%;
height: 100%;
}
#header {
width: 100%;
height: 20%;
float: left;
border: 1px solid;
}
#map {
width: 80%;
height: 80%;
float: left;
border: 1px solid;
}
#sidebar {
width: 19%;
height: 80%;
float: left;
border: 1px solid;
}
#toggle {
width: 10%;
height: 40%;
margin-right: 6.5%;
margin-top: 3.5%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">HEADER
<input type="button" data-name="show" value="Toggle" id="toggle">
</div>
<div id="map">MAP</div>
<div id="sidebar">SIDEBAR</div>
I am a beginner in angularjs
, jquery
and css
. I want to create three div with toggle side by side
Please help me how to do that in angularjs.
In normal mode Example:-
It will be like this.
If I expand center div it needs to be like this Example:-
If I expand last div it needs to be like this Example:-
Thanks..
Three or more different div can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side.
To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element. Then add the data-target="#id" attribute to connect the button with the collapsible content (<div id="demo">).
Try this. All the div can be expanded in any order. To switch back into normal position, click on the expanded div again.
Width in compressed and expanded states are expressed in percentage and you can change them in the css, according to your requirement. Also I added transition
property for smooth functioning.
Here's a pen.
$("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 expanded-div");
}
else{
$(".normal-div").removeClass("compressed-div expanded-div").addClass("compressed-div");;
$(toGetId).removeClass("compressed-div").addClass("expanded-div");
}
});
*{
box-sizing:border-box;
}
.container{
margin:0;
padding:0;
width:100%;
height:400px;
}
.normal-div{
width:33.33%;
height:100%;
position:relative;
border:2px solid black;
float:left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.expanded-div{
width:80%;
}
.compressed-div{
width:10%;
}
#div-1{
background-color:green;
}
#div-2{
background-color:red;
}
#div-3{
background-color:blue;
}
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">
<a class="expansion-btn exp-1">click</a>
</div>
<div class="normal-div" id="div-2">
<a class="expansion-btn exp-2">click</a>
</div>
<div class="normal-div" id="div-3">
<a class="expansion-btn exp-3">click</a>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With