CODEWITHSUNDEEP
javascriptjqueryhtmlslidetoggle
Aaron Benjamin
Aaron Benjamin

Reputation: 1389

How do I use jQuery slideToggle on multiple elements?

I need the "Call link" to open the drawer for each item using slideToggle, however the .next method doesn't seem to be finding the class. Is my syntax incorrect? Any help would be MUCH appreciated :D

Cheers!

HTML

<article class='tile'>
    <h2>Lorem Ipsum</h2>
    <p>Get international support.</p>

    <ul>
        <li><a class='call' style="background-image: url(img/icon_call.png);" href='#'>Call us</a></li>
        <li><a id='chat' style="background-image: url(img/icon_chat.png);" href='#'>Live Chat</a></li>    
    </ul>

 </article>

 <span class='med_div'></span>

 <section class='drawer'>
        <a href='tel:' class='block_item'><span class='title pull-left'>Wireless</span><span class='number pull-right'>770-5566</span></a>
        <a href='tel:' class='block_item'><span class='title pull-left'>GoPhone&reg;</span><span class='number pull-right'>770-5566</span></a>
        <a href='tel:' class='block_item'><span class='title pull-left'>Wireless Home Phone</span><span class='number pull-right'>770-5566</span></a>
</section>

<article class='tile'>
    <h2>Lorem Ipsum</h2>
    <p>Get international support.</p>

    <ul>
        <li><a class='call' style="background-image: url(img/icon_call.png);" href='#'>Call us</a></li>
        <li><a id='chat' style="background-image: url(img/icon_chat.png);" href='#'>Live Chat</a></li>

    </ul>   

 </article>

 <span class='med_div'></span>

  <section class='drawer'>
        <a href='tel:' class='block_item'><span class='title pull-left'>Wireless</span><span class='number pull-right'>770-5566</span></a>
        <a href='tel:' class='block_item'><span class='title pull-left'>GoPhone&reg;</span><span class='number pull-right'>770-5566</span></a>
        <a href='tel:' class='block_item'><span class='title pull-left'>Wireless Home Phone</span><span class='number pull-right'>770-5566</span></a>    

</section>

JS

<script>

$(document).ready(function(){    
$('.call').click(function() {
  $('this').next('.drawer').slideToggle('slow', function() {
  });
});
});     

</script>

Upvotes: 0

Views: 840

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

There are multiple problems in your code

  1. this is a object reference not a string
  2. .drawer is a next().next() sibling of the clicked .call elements parent .tile

you have to use

$('.call').click(function() {
    $(this).closest('.tile').next().next('.drawer').slideToggle('slow', function() {
    });
});

Demo: Fiddle

Upvotes: 1

Related Questions