如何在多个元素上使用jQuery slideToggle？

Question

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>

Answer 1

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