How to use a Collapsible without an id for the target element?

Question

I’m implementing a bbcode of spoilers for a phpbb forum, which uses Bootstrap and jQuery in theme.

The code is this:

<div class="panel-group">
<div class="panel panel-warning">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse1">SPOILER!</a>
        </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">{TEXT}</div>
    </div>
</div>

I’m having doubts, since the bbcode code will be the same for every spoiler block and so apparently I can’t use the id for the element collapse1, because any spoiler in the topic will use that same id.

The question then is: how will I "trigger" a collapsable crash without using an id?

Thank you very much!

Answer 1

If the HTML structure does not change, an alternative would be to give Collapse in the next div with the corresponding class, something like:

$('a[data-toggle="collapse"]').click(function() {

  $(this)
    //Pega todos os elementos parent
    .parents()
    //Pega a próxima div com a class .panel-collapse.collapse
    .next('div.panel-collapse.collapse')
    //e faz o collapse
    .collapse();
});

Not the best way, but if you don’t have the id is an alternative.

Follows the jsfiddle.

EDIT:

<div class="panel panel-warning">
  <div class="panel-heading">
    <h4 class="panel-title">
            <a data-toggle="collapse" onclick="$(this).parents().next('div.panel-collapse.collapse').collapse('toggle');">SPOILER!</a>
        </h4>
  </div>
  <div class="panel-collapse collapse">
    <div class="panel-body">{SPOILER}</div>
  </div>
</div>

Follows jsfiddle of the solution of the comments :)