Question

What I want to achieve is that when you click on a span, it finds the next ul, and then apply a hide/show/slideToggle to other ul´s with the same class as that one.

My html looks something like this:

    <div class="wrapper">       
       <span class="featureTitle">Trigger</span>
        <ul class="features1">
          <li></li>
       </ul>

    </div>

    <div class="wrapper">       
        <span class="featureTitle">Trigger</span>
        <ul class="features2">
            <li></li>
        </ul>

       </div>
    <div class="wrapper">
       <span class="featureTitle">Trigger</span>
       <ul class="features1">
          <li></li>
       </ul>       
    </div>

and so on…

I know these lines of JQuery code doesn’t work, but it might give you an idea of what I’m on about 🙂

jQuery('.featureTitle').click(function(){
    var ulClass= jQuery(this).next('ul').attr('class');
    jQuery(document).find(ulClass).slideToggle();
});

Any help would be greatly appreciated!

Answer 1

jQuery('.featureTitle').click(function(){
    var ulClass= jQuery(this).next('ul').attr('class');
    jQuery("." + ulClass).slideToggle();
});

That should do the trick. you can just create a selector based on that class by adding “.” before the class name