CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapbootstrap-accordion
Aly_Elgahy
Aly_Elgahy

Reputation: 189

Bootstrap Accordion issue

I was follow a video tutorial and demo about bootstrap accordion its work fine but have one issue i have to click to open every row for the accordion and click itself again to close i want to be toggle when click other one the first close and so on first here screen shot to get what i mean easily: http://www.4shared.com/download/xNSLTB57/accordoineIssue.PNG

Now here the code:

<div id="accordion" class="panel-group">
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="collapsed" href="#first" data-toggle="collapse" data-parent="#accordion">First</a>
            </div>
            <div class="panel-collapse collapse" id="first">
                <div class="panel-body">
                    <img src="images/lebowski-1.jpg" alt="1" />
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="collapsed" href="#secound" data-toggle="collapse" data-parent="#accordion">
                    Secound</a>
            </div>
            <div class="panel-collapse collapse" id="secound">
                <div class="panel-body">
                    <img src="images/lebowski-2.jpg" alt="2" />
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="collapsed" href="#third" data-toggle="collapse" data-parent="#accordion">Third</a>
            </div>
            <div class="panel-collapse collapse" id="third">
                <div class="panel-body">
                    <img src="images/lebowski-3.jpg" alt="3" />
                </div>
            </div>
        </div>
    </div>
</div>

Last here what it suppose to work: http://www.4shared.com/download/GuM54zUE/Capture.PNG

Upvotes: 3

Views: 3098

Answers (2)

scarecrow
scarecrow

Reputation: 6864

seems to be an issue with the nesting of divs

<div id="accordion" class="panel-group">
<div class="panel panel-info">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="#first" data-toggle="collapse" data-parent="#accordion">First</a>
        </h4>
    </div>
        <div class="panel-collapse collapse in" id="first">
            <div class="panel-body">
                <img src="images/lebowski-1.jpg" alt="1" />
            </div>
        </div>

</div>
<div class="panel panel-info">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a  href="#secound" data-toggle="collapse" data-parent="#accordion">
                Secound</a>
        </h4>
    </div>
        <div class="panel-collapse collapse" id="secound">
            <div class="panel-body">
                <img src="images/lebowski-2.jpg" alt="2" />
            </div>
        </div>
    </div>

<div class="panel panel-info">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="#third" data-toggle="collapse" data-parent="#accordion">Third</a>
        </h4>
    </div>
        <div class="panel-collapse collapse" id="third">
            <div class="panel-body">
                <img src="images/lebowski-3.jpg" alt="3" />
            </div>
        </div>
    </div>

Demo: fiddle

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try

<div class="panel-group" id="accordion">
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#first">First</a>
            </div>
        </div><!--Here heading has to close and collapse has to start-->
        <div class="panel-collapse collapse" id="first">
            <div class="panel-body">
                <img src="images/lebowski-1.jpg" alt="1" />
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="collapsed" href="#secound" data-toggle="collapse" data-parent="#accordion">
                    Secound</a>
            </div>
        </div>
        <div class="panel-collapse collapse" id="secound">
            <div class="panel-body">
                <img src="images/lebowski-2.jpg" alt="2" />
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="collapsed" href="#third" data-toggle="collapse" data-parent="#accordion">Third</a>
            </div>
        </div>
        <div class="panel-collapse collapse" id="third">
            <div class="panel-body">
                <img src="images/lebowski-3.jpg" alt="3" />
            </div>
        </div>
    </div>
</div>

Demo: Fiddle

Upvotes: 5

Related Questions