jQuery toggle divs in a smooth way

Question

I've made a simple landingpage, where you have four divs each taking up 25% screen width. When clicking one, all others become smaller and the clicked one expands. This works fine although it's not smooth.

Next, when closing all panels they should get back to the 25% width.

Since javascript is not my cup of tea, I would like to have some advice on this one.

The code is not efficient I guess, so if anyone comes up with a better solution that's fine.

Enough talks, here's a codepen with the current state of work: https://codepen.io/MaartenTe/pen/JKYzMx

 $("#one").click(function() { $(".content-1").animate({ width: 'toggle' }, 500); $(".content-2").hide(500); $(".content-3").hide(500); $(".content-4").hide(500); $("#one").animate({ width: '5%' }); $("#two").animate({ width: '5%' }); $("#three").animate({ width: '5%' }); $("#four").animate({ width: '5%' }); }) $("#two").click(function() { $(".content-2").animate({ width: 'toggle' }, 500); $(".content-1").hide(350); $(".content-3").hide(350); $(".content-4").hide(350); }) $("#three").click(function() { $(".content-3").animate({ width: 'toggle' }, 500); $(".content-1").hide(350); $(".content-2").hide(350); $(".content-4").hide(350); }) $("#four").click(function() { $(".content-4").animate({ width: 'toggle' }, 500); $(".content-1").hide(350); $(".content-3").hide(350); $(".content-2").hide(350); }) 

 body { padding: 0; margin: 0; background-color: #000; } .container-fluid { display: flex; height: 650px; } .container-fluid div { width: 25%; text-align: center; height: 100%; min-height: 100%; color: white; } div[class^="content-"] { width: 100%; color: black; background-color: orange; } .content-1, .content-2, .content-3, .content-4 { display: none; } #one { background-color: black; } #two { background-color: blue; } #three { background-color: red; } #four { background-color: green; } .content-1 { background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider1-copy.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .content-2 { background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider2-copy.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .content-3 { background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider-3.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .content-4 { background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider1-copy.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container-fluid"> <div id="one" class="toggle"> 1 </div> <div class="content-1 color"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque. Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id, tincidunt cursus diam. </div> <div id="two" class="toggle"> 2 </div> <div class="content-2 color"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque. Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id, tincidunt cursus diam. </div> <div id="three" class="toggle"> 3 </div> <div class="content-3 color"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque. Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id, tincidunt cursus diam. </div> <div id="four" class="toggle"> 4 </div> <div class="content-4 color"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque. Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id, tincidunt cursus diam. </div> </div> 

Answer 1

Echoing DBS' comment , it makes more sense here to leverage the CSS transition property. I'm not sure if jQuery natively supports something similar to slideDown() for shrinking elements' widths. The best you could do is toggle this CSS property on specified elements using jQuery, which would be an overkill here.

I've made a JSFiddle you can take a look at here . Essentially, when a user clicks a "content-toggler", it shrinks all of the togglers by setting their widths to 5% , finds the next sibling of the clicked toggler using .next() , and sets its width to 80% .

The content and their content togglers both leverage the CSS transition property which is documented here .

Answer 2

edited css: changed width

div[class^="content-"] {
  width: 0%;
  color: black;
  background-color: orange;
}

removed

.content-1,
.content-2,
.content-3,
.content-4 {
  display: none;
}

and made some changes in your code to make it simpler fiddle