1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Bootstrap Accordion button toggle "data-parent" not working

Discussion in 'Programming/Internet' started by Ziik, Sep 12, 2018.

  1. Ziik

    Ziik Guest

    I'm trying to create an accordion using Bootstrap 3 using the button collapsible with the data attribute, without the accordion markup. It just looks more cleaner to me.

    However I cannot make the data-parent attribute to work. I want when opening a question, all others to close. I'm reading the docs ( http://getbootstrap.com/javascript/#collapse-usage ) but still cannot get it to work.

    I'm using the following code:

    <div class="accordion" id="myAccordion">
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
    <div id="collapsible-1" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
    <div id="collapsible-2" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
    <div id="collapsible-3" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    </div>


    Here is the JSFiddle: http://jsfiddle.net/twinsen/AEew4/

    I'll be very happy if someone points to me where I'm making a mistake :\

    Login To add answer/comment
     

Share This Page