无法折叠面板

Question

I'm trying to use bootstrap to have a collapsible panel.

Here's my html:

<div class="col-xs-12 col-sm-6">
    <div class="panel panel-default">
    <div class="panel-heading">Amérique du nord/North America <span data-toggle="collapse" target-target="#panelBodyOne" class="collapsed">+</span></div>
            <div id="panelBodyOne" class="panel-body collapse"> Test</div>
      </div>
</div>

Can anyone tell me why this isn't working?

Answer 1

您已将target属性命名为target-target但应为data-target 。

<span data-toggle="collapse" data-target="#panelBodyOne" class="collapsed">+</span>

Answer 2

Add data-target attribute on your span Tag

try this code

<div class="col-xs-12 col-sm-6">
    <div class="panel panel-default">
    <div class="panel-heading">Amérique du nord/North America 
     <span data-toggle="collapse" data-target="#panelBodyOne"    
       class="collapsed">+</span>
    </div>
            <div id="panelBodyOne" class="panel-body collapse">Test</div>
      </div>
</div>