Question

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.

Answer 1

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; 
    }); 
});