CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
user3468252
user3468252

Reputation: 11

Hide on bootstrap-collapse is not working

I am using bootstrap-collapse.js v2.0.3. I have 2 queries on show/hiding accordian. 1. Need to collapse the first accordian body expanded by default. To show the first accordian, I am calling $('#Head_1').collapse ('show'); but it is not working. 2. Clicking on div#Head_2 need to collapse the expanded and need to expand Head_2. For this I am calling 

$('#Head_1').collapse ('hide');
$('#Head_2').collapse ('show');

In this case Head_2 getting expanded but Head_1 is not getting collapsed.

<div id="AccordianViewList" class="accordion" >
<div class="accordion-group">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#AccordianViewList" href="#Head_1">Head_1</a>
    </div>
    <div class="accordion-body collapse in" id="Body1">
        <div class="accordion-inner">
            <ul class="unstyled" >
                <li class="listItem inFocus" >item1</li>
                <li class="listItem" >item2</li>
                <li class="listItem" >item3/li>
            </ul>
        </div>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#AccordianViewList"  href="#Head_2">Head_2</a>
    </div>
    <div class="accordion-body in collapse" id="Head_2">
        <div class="accordion-inner">
            <ul class="unstyled" >
                <li class="listItem inFocus" >item4</li>
                <li class="listItem" >item5</li>
                <li class="listItem" >item6</li>
            </ul>
        </div>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#AccordianViewList" href="#Head_3">Head_3</a>
    </div>
    <div class="accordion-body in collapse" style="height: auto;"  id="Head_3">
        <div class="accordion-inner">
            <ul class="unstyled" >
                <li class="listItem inFocus" >item7</li>
                <li class="listItem" >item8</li>
                <li class="listItem" >item9</li>
            </ul>
        </div>
    </div>
</div>

Upvotes: 1

Views: 8665

Answers (4)

Zhaid Martinez Martinez
Zhaid Martinez Martinez

Reputation: 1

Just add and id to every tag link:

 <div class="accordion-heading">
        <a id="link1" class="accordion-toggle" data-toggle="collapse" data-parent="#AccordianViewList" href="#Head_1">Head_1</a>
    </div>
    <div class="accordion-body collapse in" id="Head_1">

And then call the click event

if($('#link1').hasClass('collapsed')){
    $('#link1').click();
}

Upvotes: 0

Jamadan
Jamadan

Reputation: 2313

My work around has been to replace:

$('#Selector').collapse('hide');

with

$('#Selector').addClass('collapse');

EDIT: this is just for the first call though.

$('#Selector').collapse('hide');

works for the subsequent calls. In my case I just make the call to both in my function

Upvotes: 0

Marcelo
Marcelo

Reputation: 4425

Remove the in class from any accordion group you don't want expanded on load.

So, for example, if you only want your #Head_1 group to be open, edit your code as such:

...
<div class="accordion-body collapse in" id="Head_1">
...
<div class="accordion-body collapse" id="Head_2">
...
<div class="accordion-body collapse" id="Head_3">
...

You also have a mismatch on the id of your first group. you are using Body1 in one area and Head_1 in the other. Change one so they match.

<div class="accordion-heading">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#AccordianViewList" href="#Head_1">Head_1</a>
</div>
<div class="accordion-body collapse in" id="Head_1">

Live example: http://www.bootply.com/9SYyp5NiLH

Upvotes: 1

Amit Joki
Amit Joki

Reputation: 59232

Try something like this:

$('#Head_1').collapse('hide');
$('#Head_2').collapse('show');

You should prefix a # to the id to select that particular element.

Upvotes: 0

Related Questions