CODEWITHSUNDEEP
javascriptjqueryjquery-ui
user1502223
user1502223

Reputation: 645

Push down bottom divs when slideDown

I hope this is a simple question im trying to push down the divs on my bottom row when my new element slides down on click

heres a link to my fiddle

http://jsfiddle.net/abtPH/

heres my jquery 

  $('li').on('click', function(e){
    $(this).find('.outer').slideToggle();
  });

heres my html 

 <ul style="list-style: none;">
  <li>
   <div style="width: 156px; height: 156px; border: solid #cfcfcf 1px; padding: 10px; text-align: center; color: #cfcfcf;"> 156px X 156px</div>

   <div class="outer">
     <div class="inner">
    </div>   
   </div>
  </li>
 </ul>

Any ideas on how to accomplish this?

Upvotes: 1

Views: 1553

Answers (1)

Christopher Marshall
Christopher Marshall

Reputation: 10736

Added jQuery UI for the duration on toggleClass.

http://jsfiddle.net/abtPH/3/

JS

$('li').on('click', function(e){
  $(this).find('.outer').slideToggle();
  $(this).toggleClass('active', 400);
});

CSS

.outer{position: absolute; width: 100%; background: black; top: auto; display: none; text-align: left;}
li.active {margin-bottom:100px;}

Upvotes: 2

Related Questions