Passing dynamically created IDs in slideToggle callback

Question

I am creating a tree type navigation structure using jQuery. I have a html unordered list where there are categories and sub-lists inside those. When a user clicks a category the list items under that category slideToggle on and off. It works great until a user creates his own category. Then I need to activate the slideToggle method for that new category and sub-category.

The html structure looks something like this:

     <ul>
        <li> <span id="userCat_1">Cat 1</span>
            <ul id="subCat_1>
                <li> Button A </li>
                <li> Button B </li>
                <li> Button C </li>
            </ul>
        </li>
        <li> <span id="userCat_2">Cat 2</span>
            <ul id="subCat_2>
                <li> Button Z </li>
            </ul>
        </li>
    </ul>

This is my most recent attempt at adding the slideToggle functionality to all "categories" in the list. Here I'm trying to use the objects' IDs (userCat_x and subCat_x) to control the slideToggle.

categoryArray= ["1", "2", "3"]

function activateToggle(){
    for (var i=0; i<categoryArray.length; i++){
        $("#userCat_" + categoryArray[i]).click(function(i){
             $("#subCat_" + categoryArray[i]).slideToggle();
        });
    }
}

I'm sure im missing some concept. Spent time looking for the answer and this question seemed to move me in the right direction. Toggle worked for new objects but it resulted in toggling other categories not the clicked on categories sub-categories.

Where's the code that demonstrates a user adding categories "dynamically"? Also, you're defining an array with values consisting of `a,b,c` but you're expecting `1,2,3` — Cue, Aug 13 '19 at 16:36
Are you running that inside `document.ready`? You'll also need to run it on a callback in your new category creation function, ideally targeting just the new elements. Show more of your code if you'd like help with that. — isherwood, Aug 13 '19 at 16:37
Your IDs end in numbers (_1, _2, etc.), while your array of IDs you're looping through are letters (a, b, c, etc.). `#userCat_a` is not the same as `#userCat_1`. — IceMetalPunk, Aug 13 '19 at 16:38
You're missing several closing quotation marks in your markup. A good editor or IDE will prevent that. — isherwood, Aug 13 '19 at 16:44
Ok edited the example. The code above is just an example of what I want to accomplish when a user adds a category. The list above is just there to show what the structure looks like, its not actual code. The categories are user generated and are not number or letters, they are words, was trying to make it readable. I changed the categories to numbers. I did not want someone to come in with a way to loop through numbers 1-3 or something. — lessharm, Aug 13 '19 at 17:52

isherwood · Accepted Answer · 2019-08-13T18:01:21.750

2

You'll probably avoid the whole headache by just using event delegation and a shared class:

$(document).on('click', '.my-menu-class', function() {
    $(this).children('ul').slideToggle();
});


<ul>
    <li class="my-menu-class"> <span id="userCat_1">Cat 1</span>
        <ul id="subCat_1">
            <li> Button A </li>
            <li> Button B </li>
            <li> Button C </li>
        </ul>
    </li>
    <li class="my-menu-class"> <span id="userCat_2">Cat 2</span>
        <ul id="subCat_2">
            <li> Button Z </li>
        </ul>
    </li>
</ul>

edited Aug 13 '19 at 18:01

answered Aug 13 '19 at 16:41

isherwood

46,000
15
100
132

Thanks for the quick answer. Definitely helped me move in the right direction. My issue is if I create a class for the
element who is the parent of the

lessharm

Aug 13 '19 at 20:10

1

Hey! Figured it out thanks to your help. Changed $(this).children('ul').slideToggle(); to $(this).parent('li').children('ul').slideToggle(); This way I select the parent of the span element which is the list element. And the only time the toggle is triggered is if someone clicks on the span element. Thanks! Have a feeling I would of been stuck on this for hours without your help. – lessharm Aug 13 '19 at 20:18

Please don't ask new questions in comments. It's not easy to answer them here. Go ahead and post a new question. – isherwood Aug 13 '19 at 21:39

Passing dynamically created IDs in slideToggle callback

1 Answers1