Horizontal Expand Collapse Using jQuery
Written by Saran on November 29, 2011, Updated December 21, 2013jQuery
Trick is to compare and change value of element CSS property "margin-left", if we combine jQuery .animate() method here, we'll end-up with smooth looking horizontal slide effect.JQUERY
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
<script type="text/javascript">
$(document).ready(function() {
var hideWidth = '-490px'; //width that will be hidden
var collapsibleEl = $('.collapsible'); //collapsible element
var buttonEl = $(".collapsible button"); //button inside element
collapsibleEl.css({'margin-left': hideWidth}); //on page load we'll move and hide part of elements
$(buttonEl).click(function()
{
var curwidth = $(this).parent().offset(); //get offset value of the parent element
if(curwidth.left>0) //compare margin-left value
{
//animate margin-left value to -490px
$(this).parent().animate({marginLeft: hideWidth}, 300 );
$(this).html('»'); //change text of button
}else{
//animate margin-left value 0px
$(this).parent().animate({marginLeft: "0"}, 300 );
$(this).html('«'); //change text of button
}
});
});
</script>Style
Since we are moving the elements left and right, our elements have fixed width of 500px here. You can change it later depending on your requirement. We'll be hiding 80% of elements to the left; hence our button should be floated to the right, so users can click on it to expand and collapse. So here's the CSS we need for our element.CSS
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
<style type="text/css">
<!--
.collapsible {
margin-bottom: 20px;
background: #EBEBEB;
border: 1px solid #CCCCCC;
padding: 10px;
width: 500px;
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
}
.collapsible button {
height: 135px;
float: right;
border: 1px solid #999999;
background: #999999;
color: #CECECE;
margin-left: 10px;
}
.collapsible button:hover {
background: #990000;
border: 1px solid #990000;
}
-->
</style>HTML
Here's our HTML elements, which we are trying to slide (expand/collapse) horizontally. You can checkout the demo in next page or download the whole code. Don't forget to share and comment if you find this helpful. Good luck!HTML
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
<div class="collapsible">
<button>»</button>
Contrary to popular belief, Lorem Ipsum is not simply random text.
</div>
<div class="collapsible">
<button>»</button>
Contrary to popular belief, Lorem Ipsum is not simply random text.
</div>
