I have a single accordion item that I am using for a read more / less link on a page.

The purpose of this is to click it to read more, and a few paragraphs will follow.

I have this working, but I need it to stay closed when the page loads, at the moment the page loads with the item open.

What can I add to fix this?

<div class="accordionMod panel-group">
    <div class="accordion-item">
        <h4 class="accordion-toggle">Read More / Less</h4>
        <section class="accordion-inner panel-body">
            <p>more info.</p>
            <h4 class="title">More titles</h4>
            <p>more content</p>
        </section>
    </div>
</div>

I have a single accordion item that I am using for a read more / less link on a page.

The purpose of this is to click it to read more, and a few paragraphs will follow.

I have this working, but I need it to stay closed when the page loads, at the moment the page loads with the item open.

What can I add to fix this?

<div class="accordionMod panel-group">
    <div class="accordion-item">
        <h4 class="accordion-toggle">Read More / Less</h4>
        <section class="accordion-inner panel-body">
            <p>more info.</p>
            <h4 class="title">More titles</h4>
            <p>more content</p>
        </section>
    </div>
</div>

• javascript
• css
• twitter-bootstrap
• accordion

5 Answers 5

I think this will work

<div class="accordion" id="myAccordion">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseOne">
                Title
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse">
            <div class="accordion-inner">
                Content
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseTwo">
                Title
            </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
                Content
            </div>
        </div>
    </div>
</div>

if you add the class in to accordion-body collapse it will be open by default.

Sounds like you don't need an accordion, which has multiple panels, only one of which can open at a time. Instead, just use collapse which allows you to toggle the visibility of a section of the page.

Panel Visibility

From the collapse docs:

The collapse plugin utilizes a few classes to handle the heavy lifting:

• .collapse hides the content
• .collapse.in shows the content
• .collapsing is added when the transition starts, and removed when it finishes

Thus, to start off collapsed, just make sure your extra content has the class collapse and not in

Simple HTML

To use collapse, you really just need to specify a data-toggle="collapse" and then point the collapse to the css selector of the section you would like to toggle using data-target.

Here's a bare bones example that just exposes the collapsing functionality:

<a data-toggle="collapse" data-target="#ReadMoreInfo" href="#">
    Read More / Less
</a>
<div id="ReadMoreInfo" class="collapse">
    <p> More Info Here </p>
</div>

HTML with Bootstrap classes

All the other bootstrap classes are just to help make the collapsible panel look like a collapsible panel. I would remend formatting them like this or doing a lot of custom CSS work. Even if you wanted to do the CSS yourself, starting off with this template and then overriding the styles would be best.

<div class="panel panel-default">

    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" 
               data-target="#ReadMoreInfo"
               href="#ReadMoreInfo">
                Read More / Less
            </a>
        </h4>
    </div>

    <div id="ReadMoreInfo" class="panel-collapse collapse">
        <div class="panel-body">
            <p>more info.</p>
            <h4 class="title">More titles</h4>
            <p>more content</p>
        </div>
    </div>

</div>

Working Demo in jsFiddle

Screenshot:

Removing the in class did not work for me in my case(though normally it should). I was just looking for the answer to this question yesterday. I used this to make the accordion default to close:

$( document ).ready(function() {
   $('.collapse').collapse({
     toggle: false
   });
});

See also this question on:

Jquery accordion not collapse by default

if accordion is with icon, add collapsed class name to :

<a class="accordion-toggle accordion-toggle-styled collapsed" >

and add collapse class name to:

<div id="collapse0" class="panel-collaps collapse">

plete code is:

    <div class="panel-group accordion" id="accordion0">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a class="accordion-toggle accordion-toggle-styled collapsed" data-toggle="collapse" data-parent="#accordion0" href="#collapse0">
                                                    Collapsible Header Text
                                                </a>
                                            </h4>
</div>
                                        <div id="collapse_3_1" class="panel-collaps collapse">
                                            <div class="panel-body">

                                                <p> body text
                                                </p>
                                            </div>
                                        </div>
                                    </div>

</div>

It's easy. In Bootstrap 5, edit your HTML to remove the "show" class from your first accordion item. See Make accordion closed by default in Bootstrap, the answer that starts "Was recently working with Bootstrap".