Horizontal Expand Collapse Using jQuery
The verticle expand collapse can be achived using jQuery slideToggle(), but if you want to expand and collapse an element horizontally, you may have to write little more than just slideToggle(), because there’s no jQuery method for sliding element horizontally. Let’s find out how we can create a horizontal sliding element, that expands and collapse on button click.
We’ll use jQuery .animate() method, which lets us create custom animation effects on any numeric CSS property, such as width, height, or left with numeric values, which can be animated.
jQuery
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.
<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.
<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!
<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>
Download Demo
