CODEWITHSUNDEEP
jqueryhtmlcss
Frank Martin
Frank Martin

Reputation: 3441

How to only slide down current element

I have the following HTML.

<div id="myid">
   <ul class="someclass">
      <li class="static">
         <a href="#"><span>Page1</span></a>
         <ul class="someclass">
            <li class="static"><a href="page1a.php"><span>Page1A</span></a></li>
            <li class="static"><a href="page1b.php"><span>Page1B</span></a></li>
         </ul>
      </li>
      <li class="static">
         <a href="#"><span>Page2</span></a>
         <ul class="someclass">
            <li class="static"><a href="page2a.php"><span>Page2A</span></a></li>
            <li class="static"><a href="page2b.php"><span>Page2B</span></a></li>
         </ul>
      </li>
   </ul>
</div>

Using the following code I am trying to expand and collapse based on link clicked by user. So if user clicks on "Page1" then it will expand (or collapse if it is already expanded) it and show Page1A and Pag1B. Similarly clicking on Page2 will have same effect. But when I use following code it expands and collapse all elements on page and not the current one which I clicked upon.

$('#myid > ul > li > a').click(function()
{
   if($(this).closest("li").children("ul").is(':visible') == false)
      $('#myid > ul > li > ul').slideDown('normal');
   else
      $('#myid > ul > li > ul').slideUp('normal');
});

Upvotes: 3

Views: 851

Answers (6)

Vaibhav Parmar
Vaibhav Parmar

Reputation: 643

you can done by the below code: 

 $('#myid > ul > li > a').click(function()
{
  if($(this).closest("li").children("ul").is(':visible') == false)
    $(this).next('ul').slideDown('normal');
  else
    $(this).next('ul').slideUp('normal');
});

Upvotes: 0

codingrose
codingrose

Reputation: 15709

Write:

$('#myid > ul > li > a').click(function () {
    $(this).closest("li").children("ul").slideToggle("normal");
});

DEMO here.

Upvotes: 0

Jai
Jai

Reputation: 74738

May be you can try this:

$('#myid > ul > li').find('> a').on('click', function (e) {
  e.preventDefault();
  $(this).siblings('ul').stop().slideToggle('normal');
});

Demo Fiddle

Upvotes: 0

Nick Salloum
Nick Salloum

Reputation: 2278

You need to use $(this).next() from jQuery, but you can simplify this a lot more, and structure it like this.

HTML

<div id="myid">
    <span>Question?</span>
    <div class="toggle">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore
        magna aliquam erat volutpat.
    </div>
</div>

CSS

span {
    margin:0;
    padding:0;
    font-weight:700;
}
.toggle {
    display:none;
}

JQUERY

$(document).ready(function() {
    $('#myid span').click(function() {
        $(this).next('.toggle').slideToggle(500);
    });
});

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28417

you need $(this)...

$(this).next('ul').slideDown('normal');

instead of

$('#myid > ul > li > ul').slideDown('normal');

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388396

The ul is the next sibling of the clicked anchor element, also you can use slideToggle() instead of the if condition

$('#myid > ul > li > a').click(function () {
    var $ul = $(this).next('ul');
    $ul.stop(true, true).slideToggle('normal');
});

Upvotes: 0

Related Questions