CODEWITHSUNDEEP
jquery
HeavyObjectLifter
HeavyObjectLifter

Reputation: 87

What is wrong with this jQuery slideToggle function?

I have a ticket management program that I am trying to add 'accordian' style functionality to using jQuery. This program is written in PHP. The output HTML looks like this:

<div class="eachticketwrapper">
     <div class="simpleticketview">
           <ul class="displayinline ticketsummarybar">
                    <li class="col0"><a href="#" class="toggleLink">E</a></li>
                       //...
           </ul>
      </div> <!-- simpleticketview -->
<br class="clear" />
<div class="toggle"> <!-- hiddenticketview -->
     //...
</div>

This repeats dozens of time on a page.

My jQuery code looks like this: 

$(document).ready(function() {
   $('div.toggle').hide();
   $('.toggleLink').click(function() {
        $(this).next('div.toggle').slideToggle('fast');
   return false;
   });
});

When I click on the E it will not slide the next div. in fact nothing happens.

I have tried to use : $('div.toggle').slideToggle('slow');

And this causes all divs to toggle. But i need it to target the NEXT div.

Thanks in advance.

Upvotes: 2

Views: 857

Answers (2)

Jason
Jason

Reputation: 52533

you need to give your 'toggle' div a unique id and match it w/your link id. then target those ids:

<div class="eachticketwrapper">     
    <div class="simpleticketview">           
        <ul class="displayinline ticketsummarybar">
                <li class="col0"><a href="#" id="link-1234" class="toggleLink">E</a></li>
                   //...           </ul>
  </div> <!-- simpleticketview -->
  <br class="clear" />
  <div id="ticket-1234" class="toggle"> <!-- hiddenticketview -->     
   //...
  </div>

jQuery:

$(document).ready(function() { 
    $('div.toggle').hide(); 
    $('.toggleLink').click(function() { 
        var id = $(this).attr("id").split("-");
        $("#ticket-" + id[1]).slideToggle('fast'); return false; 
    }); 
});

Upvotes: 1

kgiannakakis
kgiannakakis

Reputation: 104188

You can get the div without an id, but it will be somehow complicated:

$(this).parents().find("div.eachticketwrapper").nextAll().find("div.toggle:first")

This depends on the structure of your document. You may need to adapt it, if you have more than one eachticketwrapper elements. It is better to use an id.

Upvotes: 0

Related Questions