title: Can you specify a "data-target" for Bootstrap which refers to a sibling DOM element without using an ID?
body: <p>I am dynamically adding Collapsable elements to a page.  Bootstrap uses the "data-target" attribute to specify which element the collapse toggle applies to.  </p>
  
  <p>From the docs:</p>
  
  <pre><code>The data-target attribute accepts a css selector
  </code></pre>
  
  <p>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.</p>
  
  <p>Specifically the HTML looks like:</p>
  
  <pre><code>&lt;div class="accordion-group"&gt;
  &lt;div class="accordion-heading"&gt;
    &lt;a class="accordion-toggle" data-toggle="collapse" data-target="#collapseOne"&gt;
      Generated Title
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="collapseOne" class="accordion-body collapse in"&gt;
    &lt;div class="accordion-inner"&gt;
      Generated Content... this is big and sometimes needs collapsing
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to write something like (pseudo code using jquery syntax illegally):</p>
  
  <pre><code>&lt;a class="accordion-toggle" data-toggle="collapse" data-target="$(this).parent().next()"&gt;
  </code></pre>
  
  <p>But I am starting to suspect this may not be possible with CSS selectors.</p>
  
  <p>Right now as a workaround I am generating a new ID (an incrementing number appended to a string) when I create the element.  </p>
  
  <p>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?</p>