Expanding and collapsing multiple thumbnails

Question

Hi my first question on here so please be kind! Im experimenting with toggle expand and collapse of divs and I would like to know how to make the 3 thumbnails at the top all stay there when each one is expanded? The 3rd thumbnail is working correctly, the other 2 drag the thumbnail under the expanded image.

 $(".header").click(function () { $header = $(this); //getting the next element $content = $header.next(); //open up the content needed - toggle the slide- if visible, slide up, if not slidedown. $content.slideToggle(500, function () { //execute this after slideToggle is done //change text of header based on visibility of content div $header.text(function () { //change text based on condition return $content.is(":visible") ? "Collapse" : "Expand"; }); }); }); 

 .row { width: 50%; height: 300px; background-color: red; } .container { width:100%; border:1px solid #d3d3d3; } .container div { width:100%; } .container .header { background-color:#d3d3d3; padding: 2px; cursor: pointer; font-weight: bold; } .row { margin-top: 20px; } .container .content { display: none; padding : 5px; } .content-p { width: 70%; float: right; padding-right: 20px; text-align: justify; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <img src="https://placebear.com/100/100" class="header"/> <div class="content"> <img class="content-img" src="https://placebear.com/300/300" alt="" /> <p class='content-p'>1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p> </div> <img src="https://placebear.com/100/100" class="header"/> <div class="content"> <img class="content-img" src="https://placebear.com/300/300" alt="" /> <p class='content-p'>2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p> </div> <img src="https://placebear.com/100/100" class="header"/> <div class="content"> <img class="content-img" src="https://placebear.com/300/300" alt="" /> <p class='content-p'>3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p> </div> </div> <div class="row"></div> 

Answer 1

The problem is that you are placing the content in the wrong place. You should have one container where the smaller thumbnails are grouped and then another container underneath that first container with the larger content.

Then you have to change your javascript, so instead of using .next() , you should find a different way to link each thumbnail with its larger version.