How can I change the position of divs on click to the center of the parent div using jQuery?

Question

I am trying to move a div to the center of the parent div when a link is clicked.

I currently have 3 links and they correspond to 3 divs. When you click on a link, the div it corresponds to is enlarged (using css transitions). This is working well so far. The correct link enlarges the correct div.

After the div has been enlarged (to make it stand out) I need the div to move to the center and I need the div that was already in the center to take the other divs place. This is what I am struggling to achieve. I have tried using jQuery's append , prepend , animate and using closest but I am not sure how to get the div to move to the center and have the div in the center move to its closest divs place.

I hope this is making sense so far. I found this fiddle link (from a question on SO) and it moves divs but its not quite right.

Here is my HTML Structure:

<div class="test">
  <div class="test-links">
    <ul>
        <li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
        <li><a data-target=".cloud" href="#">Cloud</a></li>
        <li><a data-target=".amazon" href="#">Amazon</a></li>  
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
  </div>
</div>

This is the corresponding jQuery:

$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    $target.addClass('active');
    return false
  });
});

Here is a link to the full working example so far.

Answer 1

Try this.

Find the index of the element clicked in the div elements inside .test-slider div and insert it on the middle position.

 $(document).ready(function() { $(".test-links a").click(function() { var $target = $($(this).data('target')); $(".test-slide").not($target).removeClass('active'); $target.addClass('active'); $(".test-slider div").each(function(index,elem) { if($(elem).text() == $target.text()) { if(index > 1) $(elem).insertBefore($(".test-slider div").eq(1)); if(index < 1) $(elem).insertBefore($(".test-slider div").eq(2)); } }); return false }); }); 

 .test { float: left; width: 100%; text-align: center; } .test-links { float: left; width: 100%; margin: 30px 0; } .test-links ul { list-style-type: none; float: left; width: 100%; margin: 0; } .test-links ul li { display: inline-block; float: left; } .test-links ul li a { display: block; padding: 30px; } .test-slide { float: left; width: 33.33333%; height: 200px; color: #fff; transition: all 300ms ease; opacity: 0.8; position: relative; z-index: 0; } .ecommerce { background: blue; } .cloud { background: red; } .amazon { background: grey; } .test-slide.active { -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); -webkit-transform: scale(1.08); color: #e67e22; opacity: 1; transform: scale(1.08); position: relative; z-index: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test"> <div class="test-links"> <ul> <li><a data-target=".ecommerce" href="#">Ecommerce</a></li> <li><a data-target=".cloud" href="#">Cloud</a></li> <li><a data-target=".amazon" href="#">Amazon</a></li> </ul> </div> <div class="test-slider"> <div class="test-slide ecommerce"> Ecommerce </div> <div class="test-slide cloud"> Cloud </div> <div class="test-slide amazon"> Amazon </div> </div> </div> 

Edit : Below snippet is a better generic solution for the problem.

 $(document).ready(function() { $(".test-links a").click(function() { var $target = $($(this).data('target')); $(".test-slide").not($target).removeClass('active'); $target.addClass('active'); var len = $(".test-slider div").length; var mid = (Math.floor(len/2)); $(".test-slider div").each(function(index,elem) { if($(elem).text() == $target.text()) { if(index > mid) $(elem).insertBefore($(".test-slider div").eq(mid)); if(index < mid) $(elem).insertBefore($(".test-slider div").eq(mid+1)); } }); return false }); }); 

 .test { float: left; width: 100%; text-align: center; } .test-links { float: left; width: 100%; margin: 30px 0; } .test-links ul { list-style-type: none; float: left; width: 100%; margin: 0; } .test-links ul li { display: inline-block; float: left; } .test-links ul li a { display: block; padding: 30px; } .test-slide { float: left; width: 20%; height: 200px; color: #fff; transition: all 300ms ease; opacity: 0.8; position: relative; z-index: 0; } .ecommerce { background: blue; } .cloud { background: red; } .amazon { background: grey; } .paypal { background: yellow; } .cisco { background: green; } .test-slide.active { -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); -webkit-transform: scale(1.08); color: #e67e22; opacity: 1; transform: scale(1.08); position: relative; z-index: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test"> <div class="test-links"> <ul> <li><a data-target=".ecommerce" href="#">Ecommerce</a></li> <li><a data-target=".cloud" href="#">Cloud</a></li> <li><a data-target=".amazon" href="#">Amazon</a></li> <li><a data-target=".paypal" href="#">Paypal</a></li> <li><a data-target=".cisco" href="#">Cisco</a></li> </ul> </div> <div class="test-slider"> <div class="test-slide ecommerce"> Ecommerce </div> <div class="test-slide cloud"> Cloud </div> <div class="test-slide amazon"> Amazon </div> <div class="test-slide paypal"> Paypal </div> <div class="test-slide cisco"> Cisco </div> </div> </div> 

Answer 2

A solution using insertAfter() - this shifts the div positions and places it after the first div.

See demo below:

 $(document).ready(function() { $(".test-links a").click(function() { var $target = $($(this).data('target')); $(".test-slide").not($target).removeClass('active'); if ($target.is('.test-slider .test-slide:first-child')) $target.addClass('active').insertAfter('.test-slider .test-slide:nth-child(2)'); else $target.addClass('active').insertAfter('.test-slider .test-slide:first-child'); return false }); }); 

 .test { float: left; width: 100%; text-align: center; } .test-links { float: left; width: 100%; margin: 30px 0; } .test-links ul { list-style-type: none; float: left; width: 100%; margin: 0; } .test-links ul li { display: inline-block; float: left; } .test-links ul li a { display: block; padding: 30px; } .test-slide { float: left; width: 33.33333%; height: 200px; color: #fff; transition: all 300ms ease; opacity: 0.8; position: relative; z-index: 0; } .ecommerce { background: blue; } .cloud { background: red; } .amazon { background: grey; } .test-slide.active { -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); -webkit-transform: scale(1.08); color: #e67e22; opacity: 1; transform: scale(1.08); position: relative; z-index: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="test"> <div class="test-links"> <ul> <li><a data-target=".ecommerce" href="#">Ecommerce</a> </li> <li><a data-target=".cloud" href="#">Cloud</a> </li> <li><a data-target=".amazon" href="#">Amazon</a> </li> </ul> </div> <div class="test-slider"> <div class="test-slide ecommerce"> Ecommerce </div> <div class="test-slide cloud"> Cloud </div> <div class="test-slide amazon"> Amazon </div> </div> </div> 

Answer 3

can try this code. I just modified on your code on jsfiddle: see here: https://jsfiddle.net/6v37ue4y/10/

 $(document).ready(function() { $(".test-links a").click(function() { var $target = $($(this).data('target')); $(".test-slide").not($target).removeClass('active'); $target.addClass('active'); return false }); $('.test-slider div').click(function(e){ var indx = $( ".test-slider div" ).index( $(this) ) ; // alert(indx); if(indx == 0){ $(this).next('div').after($(this)); } else if(indx == 2){ $(this).prev('div').before($(this)); } else { } }); }); 

 .test { float: left; width: 100%; text-align: center; } .test-links { float: left; width: 100%; margin: 30px 0; } .test-links ul { list-style-type: none; float: left; width: 100%; margin: 0; } .test-links ul li { display: inline-block; float: left; } .test-links ul li a { display: block; padding: 30px; } .test-slide { float: left; width: 33.33333%; height: 200px; color: #fff; transition: all 300ms ease; opacity: 0.8; position: relative; z-index: 0; } .ecommerce { background: blue; } .cloud { background: red; } .amazon { background: grey; } .test-slide.active { -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); -webkit-transform: scale(1.08); color: #e67e22; opacity: 1; transform: scale(1.08); position: relative; z-index: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="test"> <div class="test-links"> <ul> <li><a data-target=".ecommerce" href="#">Ecommerce</a></li> <li><a data-target=".cloud" href="#">Cloud</a></li> <li><a data-target=".amazon" href="#">Amazon</a></li> </ul> </div> <div class="test-slider"> <div class="test-slide ecommerce"> Ecommerce </div> <div class="test-slide cloud"> Cloud </div> <div class="test-slide amazon"> Amazon </div> </div> </div>