Bootstrap - Cant get my Accordion to stay closed on default?

Profile picture for Zola
Zola

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>

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:

<pre><code>&lt;a data-toggle=&quot;collapse&quot; <b>data-target=&quot;#ReadMoreInfo&quot;</b> href=&quot;#&quot;&gt; Read More / Less &lt;/a&gt; &lt;div <b>id=&quot;ReadMoreInfo&quot;</b> class=&quot;collapse&quot;&gt; &lt;p&gt; More Info Here &lt;/p&gt; &lt;/div&gt; </code></pre>

HTML with Bootstrap classes

All the other bootstrap classes are just to help make the collapsible panel look like a collapsible panel. I would recommend 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.

<pre><code>&lt;div class=&quot;panel panel-default&quot;&gt; &lt;div class=&quot;panel-heading&quot;&gt; &lt;h4 class=&quot;panel-title&quot;&gt; &lt;a data-toggle=&quot;collapse&quot; <b>data-target=&quot;#ReadMoreInfo&quot;</b> href=&quot;#ReadMoreInfo&quot;&gt; Read More / Less &lt;/a&gt; &lt;/h4&gt; &lt;/div&gt; &lt;div <b>id=&quot;ReadMoreInfo&quot;</b> class=&quot;panel-collapse collapse&quot;&gt; &lt;div class=&quot;panel-body&quot;&gt; &lt;p&gt;more info.&lt;/p&gt; &lt;h4 class=&quot;title&quot;&gt;More titles&lt;/h4&gt; &lt;p&gt;more content&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>

Working Demo in jsFiddle

Screenshot:

screenshot