CODEWITHSUNDEEP
javascriptjqueryslidetoggle
Nicholas Hazel
Nicholas Hazel

Reputation: 3740

Slide Down Next UL from H3 with jQuery

<h3>Details<span class="dropdown">View</span></h3>
    <div id="sbc">
        <ul>
            <li><h2>Role: Supervisor</h2></li>
            <li>Manager Contact:</li>
            <li class="small">*location closed - please contact corporate office for further assistance</li>
            <li><a href=""></a></li>
            <li><h2>Responsibilities</li>
            <li>
                <ul>
                <li>Assist customers with miscellaneous issues from AIV, AppStore, Kindle Tier 2</li>
                <li> - Fallback - Kindle Tier 1</li>
                </ul>
            </li>
        </ul>
    </div>

Trying to write jQuery to onClick slideDown the UL below the span. Attempted multiple solutions, but all seem to fail.

This is my jQUery Code:

<script>
(function() {
    $('span.dropdown').on('click', function() {
        $(this).next('ul').slideToggle();
    });
})(jQuery);
</script>

Racking my brain dry.... I'm not a complete noob (but apparently I am) and would love some help.

On Click ***Slide Down: ul:after span

Toggle it.

Upvotes: 0

Views: 932

Answers (5)

The Mechanic
The Mechanic

Reputation: 2329

Try this let me know

$('.dropdown').on('click', function() {
       $(this).parent().next().children('ul').slideToggle();
 });

Upvotes: 0

Sandeep Kumar
Sandeep Kumar

Reputation: 803

Try this

$('span.dropdown').on('click', function() {
    $('ul').slideToggle();
   // alert('hi');
});

Upvotes: 0

palaѕн
palaѕн

Reputation: 73926

You need to do this:

$(this)
    .parent()        // Go to the parent h3 element of current span clicked
    .next('#sbc')    // Go to the next div element with id 'sbc'
    .children('ul')  // Go to its child ul element
    .slideToggle();  // and finally slide toggle

Upvotes: 1

billyonecan
billyonecan

Reputation: 20260

You need to traverse to the parent first, get the next element, and then get the child ul:

$(this).parent().next().children('ul').slideToggle();

Since your div has an id, and an id must be unique, you could just do:

$('#sbc > ul').slideToggle();

Upvotes: 0

Nicholas Hazel
Nicholas Hazel

Reputation: 3740

Answered my own question.... (yes, 12 seconds later)

<script>
(function() {
    $('span.dropdown').on('click', function() {
        $(this).parent().next('ul').slideToggle();
    });
})(jQuery);
</script>

Thanks for the help! I knew I was being an idiot and recording the DOM incorrectly :-P

Upvotes: 0

Related Questions