CODEWITHSUNDEEP
jquerycss
user2837485
user2837485

Reputation: 59

How make li elements slide down and up?

I have <li> elements in a <ul> and I want them expand down and up and each element should expand down and up.

HTML:

<ul class="answers">
    <li class="answer">
        <a href="#" class="expand">click</a>
        <p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkffsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
    </li>
    <li class="answer">
        <a href="#" class="expand">click</a>
        <p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkffsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
    </li>
    <li class="answer">
        <a href="#" class="expand">click</a>
        <p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkffsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
    </li>
    <li class="answer">
        <a href="#" class="expand">click</a>
        <p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkffsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
    </li>
</ul>

CSS:

ul {
    list-style: none;
}
li {
    width: 100%;
    height: 20px;
    overflow: hidden;
}

JS:

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

The issue I am having is that when I click the expand button, all the <li> elements expand.

Upvotes: 0

Views: 654

Answers (5)

Pete TNT
Pete TNT

Reputation: 8403

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/

Upvotes: 0

King King
King King

Reputation: 63317

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.

Upvotes: 0

fxenik
fxenik

Reputation: 473

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.

Upvotes: 0

adihaosd62as
adihaosd62as

Reputation: 102

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'});  
})

Upvotes: 0

dsgriffin
dsgriffin

Reputation: 68596

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

Upvotes: 1

Related Questions