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.
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.
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.
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!