0

I have a small bit of jquery that applies the jquery-ui accordian to an array of divs.

The divs are generated dynamically and each one needs to have a unique ID. I have successfully generated unique IDs for divs with each one having a different number at the end. Now I would like the jquery to be flexible enough to handle any of the divs no matter what number is at the end. All the divs have IDs with the naming convention "activity-accordion123" or "activity-accordian+number"

Here is the code I am using currently for the divs that have already been generated:

$(function() {
    $( "#activity-accordion408,#activity-accordion410,#activity-accordion415,#activity-accordion428,#activity-accordion439,#activity-accordion427" ).accordion({
      collapsible: true,
heightStyle: "content",
active: false,
header: "h3",
navigation: true
    }); 
  });

I would like to change this javascript so that it will work with any div that has the ID of "activity-accordion+any number". Is this possible?

2

6 Answers 6

1

Use this css selector: *=

$(function() {
    $( "[id*='activity-accordion']" ).accordion({
         collapsible: true,
         heightStyle: "content",
         active: false,
         header: "h3",
         navigation: true
    }); 
});
5
  • '*=' means contains not start with
    – A. Wolff
    Commented Jul 19, 2013 at 13:14
  • @zladuric that doesn't matter; it's jQuery so it'll work wherever the library works.
    – Pointy
    Commented Jul 19, 2013 at 13:14
  • @roasted see this question's accepted answer: stackoverflow.com/questions/12155833/… Commented Jul 19, 2013 at 13:15
  • @MohammadAreebSiddiqui your answer would work too but i was thinking OP wants ID starting with some string, not containing some string
    – A. Wolff
    Commented Jul 19, 2013 at 13:16
  • No, using your selector you will match element with ID something-activity-accordion too
    – A. Wolff
    Commented Jul 19, 2013 at 13:20
1

you could select them like this:

$("div[id^='activity-accordion'"])

Selects all div, that starts with activity-accordion

0

Use ID attribute selector wildcard 'start with' like that:

$('div[id^="activity-accordion"]').accordion({
    collapsible: true,
    heightStyle: "content",
    active: false,
    header: "h3",
    navigation: true
});
0

Is there any reason that you can not simply have each div possess an "activity-accordion" class? Classes are useful to style/manipulate multiple similar elements. You can then use $('.activity-accordion') to select all such elements.

1
  • Yes I thought of that but the jquery-ui accordion, if to be repeated on one page, needs to be applied to divs with unique IDs/Classes. As far as I could understand. Commented Jul 19, 2013 at 13:16
0

use a class would be more didactic and correct to do

$(function() {
    $( ".accordions" ).accordion({
      collapsible: true,
heightStyle: "content",
active: false,
header: "h3",
navigation: true
    }); 
  });
0

To match all <div>s, with an id of the pattern activity-accordion<number>, you can use:

$('div').filter(function() {
    return /activity\-accordion\d+/.test(this.id);
}).accordion({
    ...
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.