Bootstrap collapse show and hide immediately

Question

I'm trying to make my bootstrap button that opens a div work as here : http://getbootstrap.com/javascript/#collapse. The problem is that when I click on my buttons they show the div content but this content is hidden immediatelly.

My HTML code :

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

Then at the end before </body> tag I have this :

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

First it wan not working (and I dont know how to add the collapse functionality) and then I've found a JS filehere : https://getbootstrap.com/2.0.4/javascript.html#collapse and nos I have the problematic effect.

So how to make it work ? Where can I find the right collapse plugin ?

PS: I'm working on google chrome.

Possible duplicate of [Bootstrap Modal immediately disappearing](http://stackoverflow.com/questions/13648979/bootstrap-modal-immediately-disappearing) — demo, Mar 01 '17 at 16:22
seems like you need to exclude `collapse.js` from scripts as `bootstrap.min.js` already has same logic — demo, Mar 01 '17 at 16:23
Thank you demo ! I've made a review of my code, and got rid of the collapse.js file. Now it's working perfectly ! — Grechka Vassili, Mar 02 '17 at 08:43

score -1 · Answer 1 · answered Mar 01 '17 at 16:47

-1

the best approach to execute your functionality would be via Angularjs or jquery/javascript. Not too sure about the plugin, though please try adding collapse.in class to the div you wish to show

answered Mar 01 '17 at 16:47

Gaurav Mithas

67
2
8

Bootstrap collapse show and hide immediately

1 Answers1