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

Question

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

Navigation

#1 by (1 votes)

1

I'm implementing a spoof bbcode for a phpbb forum, which uses Bootstrap and jQuery in the 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 have doubts, since the bbcode code will be the same for every spoiler block and so apparently I can not use the id for the collapse1 element, since any spoiler in the topic will use that same id. p>

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

Thank you very much!

javascript jquery html5 twitter-bootstrap

asked by anonymous 01.02.2016 / 22:42

1 answer

Problem to join two SELECTs in a single statement Create JSON with Hierarchy through Excel

score 1 · Accepted Answer

If the HTML structure does not change, an alternative would be to collapse 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();
});

It's not the best way, but if you do not have the id it's an alternative.

Follow 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>

Follow jsfiddle for the solution to the comments:)