ブートストラップの折りたたみはすぐに表示され、非表示になります

Question

私はdivを開くブートストラップボタンをここで作成しようとしています：http://getbootstrap.com/javascript/#collapse。問題は、自分のボタンをクリックするとdivのコンテンツが表示されますが、このコンテンツはすぐに隠されてしまうことです。

私のHTMLコード：

<div class="row"> 
    <div class="col-lg-offset-3 col-md-offset-3 col-sm-offset-2 col-lg-6 col-md-6 col-sm-8 col-xs-12"> 
     <h3 class="centered pull-left">{{ 'current.user.data'|trans }}</h3> 
     <h3><button type="button" data-toggle="collapse" class="pull-right" data-target="#main-data" aria-expanded="false" aria-controls="collapseExample"><i class="fa fa-arrow-down"></i></button></h3> 
     <div id="main-data" class="collapse"> 
      <p>{{ 'person.firstName'|trans }} : {{ user.firstName }}</p> 
      <p>{{ 'person.lastName'|trans }} : {{ user.lastName }}</p> 
      <p>{{ 'person.email'|trans }} : {{ user.email }}</p> 
      <p>{{ 'person.birthDate'|trans }}: {{ user.bornOn ? user.bornOn|date('d-m-Y') }}</p> 
      <p>{{ 'person.familySituation'|trans }}: {{ user.familySituation }}</p> 
      <p>{{ 'person.profession'|trans }} : {{ user.profession }}</p> 
      <p>{{ 'person.createdAt'|trans }} {{ user.createdAt ? user.createdAt|date('d-m-Y') }}</p> 
     </div> 
    </div> 

    <div class="col-lg-offset-3 col-md-offset-3 col-sm-offset-2 col-lg-6 col-md-6 col-sm-8 col-xs-12"> 
     <h3 class="centered pull-left">{{ 'person.addresses'|trans }}</h3> 
     <h3><button type="button" data-toggle="collapse" class="pull-right" data-target="#addresses">+</button></h3> 
     <div id="addresses" class="collapse"> 
      {% for address in user.addresses %} 
       <p class="underline">{{ 'address'|trans }} N°{{ loop.index }}</p> 
       <p>{{ 'person.addresses.street1'|trans }} : {{ address.street1 }}</p> 
       <p>{{ 'person.addresses.street2'|trans }} : {{ address.street2 }}</p> 
       <p>{{ 'person.addresses.number'|trans }} : {{ address.number }}</p> 
       <p>{{ 'person.addresses.box'|trans }} : {{ address.box }}</p> 
       <p>{{ 'person.addresses.locality'|trans }} : {{ address.locality }}</p> 
       <p>{{ 'person.addresses.type'|trans }} : {{ address.addressType }}</p> 
      {% endfor %} 
     </div> 
    </div> 

    <div class="col-lg-offset-3 col-md-offset-3 col-sm-offset-2 col-lg-6 col-md-6 col-sm-8 col-xs-12"> 
     <h3 class="centered pull-left">{{ 'person.medias'|trans }}</h3> 
     <h3><button type="button" data-toggle="collapse" class="pull-right" data-target="#medias"><i class="fa fa-arrow-down"></i></button></h3> 
     <div id="medias" class="collapse"> 
      {% for media in user.medias %} 
       <p class="underline">{{ '__media__label__'|trans }} N°{{ loop.index }}</p> 
       <p>{{ 'type'|trans }} : {{ media.typeMedia }}</p> 
       <p>{{ 'detail'|trans }} : {{ media.detail }}</p> 
      {% endfor %} 
     </div> 
    </div> 
</div> 

が続いて終わりに、私はこれを持って</body>タグの前に：

<script src="{{ asset('static/lib/jQuery/jquery-3.1.1.min.js') }}"></script> 
<script src="{{ asset('static/lib/jQuery/jquery-ui.min.js') }}"></script> 
<script src="{{ asset('static/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js')}}"></script> 
<script src="{{ asset('static/lib/bootstrap-3.3.7-dist/js/collapse.js') }}"></script> 

まずそれが動作していないWAN（と私は折りたたみ機能を追加する方法を知りません） JSファイルが見つかりました：https://getbootstrap.com/2.0.4/javascript.html#collapseとnos問題のある問題があります。

どのように動作させるには？右の折り畳みプラグインはどこにありますか？

PS：私はGoogle Chromeで作業しています。

Answer 1

あなたの機能を実行する最善の方法はAngularjsまたはjquery/javascriptです。あなたが表示したいdivにcollapse.inクラスを追加してみてください。