Question

I need some help with some dynamic jQuery – if thats what it would be called. Basically, I have a number of DIVs, each with the same name, except an increasing number is added on the end – for example:

<div id="category-1"></div>
<div id="category-2"></div>
<div id="category-3"></div>

….so and and so forth. On the main menu, I want to create buttons that toggle each item, so there would be a button to toggle category-1, category-2, and so forth.

The ability to add/remove categories is going to be part of a CMS (wordpress), so the jQuery needs to somehow count how many “category-” there are on the page, and then create a button for each one in the main menu.

I know how to create a toggle button in jQuery, however I have had no luck getting the dynamic-ness that I need (if thats even a word!). My first and only attempt so far has been to use inline jQuery encased in PHP tags, so that a jQuery toggle button is generated for each category DIV – it seemed to generate the code correctly when I viewed source, but the buttons didn’t work, probably because PHP is server side and jQuery is client side. (thats just a guess).

Does anyone know how I create the jQuery code I need?

Thanks
Zach

Answer 1

This is the best way I could come up with:

var divs = $('div[id^="category-"]');
var num = divs.length;

for (i=1; i<=num; i++) {
    $('<button class="toggles" />')
        .text('Toggle div ' + i)
        .appendTo('#divToAddButtonsTo');
}

$('.toggles').live('click',
                   function(){
                       var thisIs = $(this).index();
                       $('div[id^="category-"]').eq(thisIs).toggle();
                   });

JS Fiddle demo.

Obviously this is run inside the $(document).ready().

References:

• attribute-starts-with ^= selector.
• toggle().
• live().
• appendTo().
• index().