How make li elements slide down and up?

Question

I have

elements in a

and I want them expand down and up and each element should expand down and up.

HTML:

Answer 1

I would implement your code like this:

HTML:

<ul class="answers">
  <li class="answer"><a href="#"></a>
  <p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkf
    fsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
  </li>
  <li class="answer"><a href="#"></a>
  <p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkf
    fsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
  </li>
  <li class="answer"><a href="#"></a>
  <p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkf
    fsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
  </li>

  <li class="answer"><a href="#"></a>
  <p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkf
    fsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
  </li>
</ul>

CSS:

 ul{
  list-style:none;
}
li { 
  width:100%; 
  height:20px; 
  overflow:hidden;
}
li.expanded {
  height:auto;
}
li.expanded > a:before {
  content:'Collapse';
}
li > a:before {
  content:'Expand';
}  

JS:

$('li.answer > a').click(function(){
  $(this).parent().toggleClass('expanded');
});  

Demo.

Answer 2

You need to make it element-specific instead of selecting all elements with the class (by referencing this)

For your markup, you could combine this with parent():

$(document).ready(function(){
   $('.expand').click(function(){
     $(this).parent().css('height','auto');  
   });
});

jsFiddle here

Answer 3

Target the clicked elements parent instead of all the .answers

$(document).ready(function(){
   $('.expand').click(function(){
      $(this).parent().css('height','auto');  
   })
});

http://jsfiddle.net/Tmm6R/ fiddle

To toggle the others, target the siblings and set them to default

$(document).ready(function(){
   $('.expand').click(function(){
        $(this).parent().css('height','auto'); 
        $(this).parent().siblings().css("height", "20px");
   })
});

http://jsfiddle.net/Tmm6R/1/

If you also want to the opened one to be togglabble, you could do something like this:

$(document).ready(function(){
    $('.expand').click(function(){        
        var parent = $(this).parent();
        console.log(parent.css("height"));
        if(parent.css("height") > "20px"){
           parent.css("height", "20px");   
        } else {
           parent.css("height", "auto");   
        }

        $(this).parent().siblings().css("height", "20px");
    })
});

http://jsfiddle.net/TCxP5/

Answer 4

I would recommend avoiding the styling with the fixed height.

Add a style="display:none" on each

:

<li class="answer"><a href="#" class="expand">click</a>
    <p style="display: none">adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkf
        fsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
</li>

Then do this in your javascript:

$(document).ready(function(){
   $('.expand').click(function(){
     $(this).parent().find("p").slideToggle();
   });
});

In this way you get to toggle each answer with the click action.

Answer 5

How about this? http://jsfiddle.net/StartStep/5svS8/ The problem was with overflow: hidden and jquery selector

$('.expand').click(function(){
    $(this).parent('.answer').css({'height':'auto','overflow':'scroll'});  
})