Question

I’m kinda new to jQuery and I did get the toggle function to work as I needed, but I was wondering if there was a more general-specific approach to handling the target id’s with it. I’ll give you my code and an example of what I mean.

jQuery:

$(document).ready(function() {
    $('#toggler').click(function(){
        $('ul#toggled').toggle();
    });
});

Html:

<ul>
    <li><a id="toggler" class="g" onclick="toggle()">Specializations</a>
    <ul id="toggled">
        <li>[Spec 1]</li>
        <li>[Spec 2]</li>
        <li>[Spec 3]</li></ul></li>
    <li>Playing Styles</li>
    <li>Stats, Gems, Enchants</li>
    <li>Gear</li>
    <li><a id="toggler" onclick="toggle()">Professions</a>
            <ul id="toggled">
            <li>Primary</li>
            <li>Secondary</li></ul></li>
</ul>

I want the toggle function to work on the submenus by clicking the list item they’re originating from. At the moment, this does give me what I want, but it also targets all the toggle functions in the menu at the same time. How can I use a general solution that will target the ‘toggler’ and immediately ‘toggled’ pairs? Would using variables in the names help, and if so how? Would putting it in an array be better? I’m not sure how to do this so any help is appreciated. Let me know if I need to give more information.

Answer 1

Based on the way that your DOM is structured above my, solution would be the following ->

$(document).ready(function() {
  $('#toggler').click(function(){
    $(this).next('ul.toggled').toggle();
  });
});

$(this) refers to the element we clicked, next() is a jQuery selector & abstractor, and finally. We literally are saying, "Toggle the next UL with an ID of #toggled"

I believe what you want is specific portions of the list to open, and not all of the lists. Also, don’t use ID’s over and over, it’s not good practice, change these to classes, now you’re good.

extras

Also, i don’t know what the ‘toggler()’ function does onClick, but you should just remove that, as jQuery is handling the eventListener for the click method.