Edit Question - KnowledgeHub

Title Body

I am dynamically adding Collapsable elements to a page. Bootstrap uses the "data-target" attribute to specify which element the collapse toggle applies to. From the docs: The data-target attribute accepts a css selector Is there a way to write a selector which specifies the next sibling of the parent element? All of the examples from the docs seem to use selections by ID. Specifically the HTML looks like: <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-target="#collapseOne"> Generated Title </a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="accordion-inner"> Generated Content... this is big and sometimes needs collapsing </div> </div> </div> I would like to write something like (pseudo code using jquery syntax illegally): <a class="accordion-toggle" data-toggle="collapse" data-target="$(this).parent().next()"> But I am starting to suspect this may not be possible with CSS selectors. Right now as a workaround I am generating a new ID (an incrementing number appended to a string) when I create the element. Is there a nicer approach using a selector? Should I be using some post-creation javascript to set the data-target attribute? Is generating IDs for dynamic content the standard approach?

Tags (comma-separated) Cancel