Sure you can!  Accordions are just [collapse controls][1] that have some automatic wiring provided by bootstrap.

The only thing the collapse does is toggle the visibility of specified section plus provide some animations.  If you'd like something else to be visible, even when the toggled section is hidden, just put it outside the toggled section so it's always there.  Collapsing won't change that.

Here's an example with a teaser panel that's always visible before the main panel.  You can style it however you want.

### Example

[![Screenshot example of Accordion with preview text][2]][2]

### Demo in Stack Snippets





    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion"
               href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Panel - Header - 1
            </a>
          </h4>
        </div>
        <div class="panel-teaser panel-body" >
          Panel - Teaser - 1
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" 
             role="tabpanel" aria-labelledby="headingOne">

          <div class="panel-body">
            Panel - Body - 1
          </div>
        </div>
      </div>
      
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
          <h4 class="panel-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" 
               href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Panel - Header - 2
            </a>
          </h4>
        </div>
        <div class="panel-teaser panel-body">
          Panel - Teaser - 2
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" 
             role="tabpanel" aria-labelledby="headingTwo">
          <div class="panel-body">
            Panel - Body - 2
          </div>
        </div>
      </div>
      
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
          <h4 class="panel-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
               href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Panel - Header - 3
            </a>
          </h4>
        </div>
        <div class="panel-teaser panel-body">
          Panel - Teaser - 3
        </div>
        <div id="collapseThree" class="panel-collapse collapse" 
             role="tabpanel" aria-labelledby="headingThree">
          <div class="panel-body">
            Panel - Body - 3
          </div>
        </div>
      </div>
      
    </div>




  [1]: https://getbootstrap.com/docs/3.4/javascript/#collapse
  [2]: https://i.stack.imgur.com/Cp3g2.png

I want to replace a script I have that allows users to "read more" with the Bootstrap collapse accordion. My problem is that as far as I've seen the accordion is either open or closed. 

Does anyone know about an option to show some text in closed mode?

In the script I'm using right now I can make some text visible by changing the height of the text area, but in Bootstrap this option doesn't work. When I change the height of `.in` or `.out` (the css that controls the text area height), it simply opens and closes until that height. Has anybody found a workaround for this? 


**My HTML**:



    <div class="accordion" id="accordion2"> 
      <div class="accordion-group"> 
        <div class="accordion-heading"> 
          <a class="accordion-toggle"  href="#collapseOne"
             data-toggle="collapse" data-parent="#accordion2">
            TITLE OF THE COLLAPSE 
        </a> 
        </div> 
        <div id="collapseOne" class="accordion-body collapse in"> 
          <div class="accordion-inner"> 
            DATA IN THE COLLAPSE 
          </div> 
        </div>
      </div>
    </div>

Showing partial text in bootstrap collapse accordion

Updated Answer
===

Trying to open multiple panels of a collapse control that is setup as an accordion i.e. with the `data-parent` attribute set, can prove quite problematic and buggy (see this question on [multiple panels open after programmatically opening a panel][question])

Instead, the best approach would be to:

1. Allow each panel to toggle individually
2. Then, enforce the accordion behavior manually where appropriate.

----


**To allow each panel to toggle individually**, on the `data-toggle="collapse"` element, set the `data-target` attribute to the `.collapse` panel ID selector (instead of setting the `data-parent` attribute to the parent control.  You can read more about this in the question [Modify Twitter Bootstrap collapse plugin to keep accordions open][keep-open]. 

Roughly, each panel should look like this:



<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;
             data-toggle=&quot;collapse&quot; 
             <b>data-target=&quot;#collapseOne&quot;&gt;</b>
             Collapsible Group Item #1
         &lt;/h4&gt;
    &lt;/div&gt;
    &lt;div <b>id=&quot;collapseOne&quot; </b>
         class=&quot;panel-collapse collapse&quot;&gt;
        &lt;div class=&quot;panel-body&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

---

**To manually enforce the accordion behavior**, you can create a handler for the collapse show event which occurs just before any panels are displayed. Use this to ensure any other open panels are closed before the selected one is shown (see this [answer to multiple panels open][manual-accordion]).  You'll also only want the code to execute when the panels are active. To do all that, add the following code:



    $('#accordion').on('show.bs.collapse', function () {
        if (active) $('#accordion .in').collapse('hide');
    });

----

Then use `show` and `hide` to toggle the visibility of each of the panels and `data-toggle` to enable and disable the controls.



<pre><code>$('#collapse-init').click(function () {
    if (active) {
        active = false;
        <b>$('.panel-collapse').collapse('show');
        $('.panel-title').attr('data-toggle', '');</b>
        $(this).text('Enable accordion behavior');
    } else {
        active = true;
        <b>$('.panel-collapse').collapse('hide');
        $('.panel-title').attr('data-toggle', 'collapse');</b>
        $(this).text('Disable accordion behavior');
    }
});
</code></pre>


[Working demo in jsFiddle][fiddle]
=====


[answer]: https://stackoverflow.com/a/20354951/1366033
[keep-open]: https://stackoverflow.com/a/11658976/1366033
[manual-accordion]: https://stackoverflow.com/a/19158601/1366033

[question]: https://stackoverflow.com/a/19158601/1366033
[fiddle]: http://jsfiddle.net/KyleMit/f8ypa/

I'm using Bootstrap 3 and trying to setup the following accordion/collapse structure:

1. Onload: Each accordion panel in a group is fully collapsed and functions as documented/expected.

2. Button click: Each accordion panel expands and clicking the toggles has no effect (including URL anchor effects).

3. Another button click: All panels return to onload state; all collapsed and clickable as normal.

I've made it to step 2, but when I click the button again at step 3 it has no effect. I also see no console errors reported in Chrome Dev Tools or by running the code through my local JSHint.

I'd like this cycle to be repeatable each time the button is clicked.

I've setup my code here http://bootply.com/98140 and here http://jsfiddle.net/A9vCx/

I'd love to know what I'm doing wrong and I appreciate suggestions. Thank you!

My HTML:

    <button class="collapse-init">Click to disable accordion behavior</button>
    <br><br>
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
              Collapsible Group Item #1
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
          <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
              Collapsible Group Item #2
            </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
          <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
              Collapsible Group Item #3
            </a>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
          <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
          </div>
        </div>
      </div>
    </div>

My JS:

    $(function() {
    
      var $active = true;
    
      $('.panel-title > a').click(function(e) {
        e.preventDefault();
      });
    
      $('.collapse-init').on('click', function() {
        if(!$active) {
          $active = true;
          $('.panel-title > a').attr('data-toggle', 'collapse');
          $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
          $(this).html('Click to disable accordion behavior');
        } else {
          $active = false;
          $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
          $('.panel-title > a').removeAttr('data-toggle');
          $(this).html('Click to enable accordion behavior');
        }
      });
      
    });

Bootstrap 3 collapse accordion: collapse all works but then cannot expand all while maintaining data-parent

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][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][fiddle]

**Screenshot**:

[![screenshot][screenshot]][fiddle-show]

[collapse docs]: http://getbootstrap.com/javascript/#collapse

[fiddle]: http://jsfiddle.net/KyleMit/MD2FP/
[fiddle-show]: http://jsfiddle.net/KyleMit/MD2FP/show

[screenshot]: http://i.imgur.com/iKqar66.gif

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>


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

One of the problems is that there isn't really a method that allows you to toggle and specify the options for collapse all at the same time, so this doesn't exist:



    $('#navbar-collapse-menu').collapse('toggle', {
        parent: "#accordion"
    });   

Bootstrap controls really have two distinct phases (that are sometimes combined):

1. Initialization
2. Invocation.

The options are set during initialization, so your code would have to look like this:



    $('#navbar-collapse-menu').collapse({
        parent: "#accordion"
    });  
    $('#navbar-collapse-menu').collapse('toggle');  

However, there are other problems like the parent is "dependent on the `panel` class".  

If you just want a cleaner way of manually handling the toggles in javascript, you could do the following.  

The problem with removing data-attributes on the elements is that they really provide a clean way of deciding what collapsible element each button is mapped to.  To create in javascript, you should have one object that stores all your mappings and then you can invoke the entire accordion with a single javascript function.

On the first load of the page, create the mapping and initialize the collapse objects.  Since we don't want them expanded yet, add the `toggle:false` option to prevent opening immediately.  When any button in your accordion is clicked, get all the potentially collapsible elements.  Hide any element that's not the originator of the event and toggle the target of the button that raised the event.



    var mapping =  { 
      'btn-collapse-menu': '#navbar-collapse-menu' ,
      'btn-collapse-login': '#navbar-collapse-login' 
    };

    var $panels = $('#accordion .navbar-collapse').collapse({toggle: false});

    $('#accordion .navbar-header button').click(function(){
      var target = mapping[this.id];
      $panels.not(target).collapse('hide');
      $panels.filter(target).collapse('toggle');
    });

### Here's a demo in stack snippets:





    var mapping =  { 
      'btn-collapse-menu': '#navbar-collapse-menu' ,
      'btn-collapse-login': '#navbar-collapse-login' 
    };

    var $panels = $('#accordion .navbar-collapse').collapse({toggle: false});

    $('#accordion .navbar-header button').click(function(){
      var target = mapping[this.id];
      $panels.not(target).collapse('hide');
      $panels.filter(target).collapse('toggle');
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.js"></script>


    <div class="container-fluid panel" id="accordion">
      <div class="navbar-header">
        <button type="button" class="btn btn-default" 
                id="btn-collapse-menu">
          MENU
        </button>
        <button type="button" class="btn btn-default" 
                id="btn-collapse-login">
          LOGIN
        </button>
      </div>
      
      <div class="collapse navbar-collapse" id="navbar-collapse-menu">
        <nav>
          <ul class="list-unstyled text-center">
            <li><h3 href="#">Blog Content</h3></li>                
          </ul>
        </nav>
      </div>
      
      <div class="collapse navbar-collapse" id="navbar-collapse-login">
        <p>Login Content</p>
      </div>
      
    </div>

I want to use the accordion on my site, however I'd prefer to use it over javascript plugin rather than html markup. I would like to have two buttons which open different content, however make only one visible at a time. After reading the documentation I figured that if they have the same parent selector it would work. Could anyone take a look at this fiddle and tell me where do I go from here?

http://jsfiddle.net/krasnoludojad/q7962oxp/

HTML

    <div class="container-fluid" id="accordion">
        <div class="navbar-header">
            <button type="button" class="btn btn-default" id="btn-collapse-menu">MENU</button>
            <button type="button" class="btn btn-default" id="btn-collapse-login">LOGIN</button>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse-menu">
            <nav>
                <ul class="list-unstyled text-center">
                    <li><h3 href="#">BLOG</h3></li>                
                </ul>
            </nav>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse-login">
            <p>Lorem ipsum.</p>
        </div>
    </div>

JS

    $('#btn-collapse-menu').on('click', function(){		
		$('#navbar-collapse-menu').collapse('toggle', {
			parent: "#accordion"
		});				
	});
	$('#btn-collapse-login').on('click', function(){		
		$('#navbar-collapse-login').collapse('toggle', {
			parent: "#accordion"
		});				
	});

### UPDATE

Well I've come up with a temporary solution, which I'm not that happy about so I would still appreciate the answer to mechanics behind working this out with parent option. For now I've patched with javascript by checking if the class `.in` exists that comes when the field is being shown

    $('#btn-collapse-menu').on('click', function(){		
		$('#navbar-collapse-login').hasClass('in') ? $('#navbar-collapse-login').collapse('hide') : null;
		$('#navbar-collapse-menu').collapse('toggle');
	});
	$('#btn-collapse-login').on('click', function(){
		$('#navbar-collapse-menu').hasClass('in') ? $('#navbar-collapse-menu').collapse('hide') : null;
		$('#navbar-collapse-login').collapse('toggle');				
	});

Invoke Bootstrap Accordion via JavaScript

Check the version of Bootstrap that you're using.  It appears to be working here for v3.3.2





    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              1. Headline One
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body">
                Some text
          </div>
        </div>
      </div>
      
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
          <h4 class="panel-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              2. Second headline
            </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <div class="panel-body">
              Some more text
          </div>
        </div>
      </div>

    </div>

I have the following accordion defined which otherwise works fine, except that the first panel-body does not collapse after expanding the second panel-body, though it does eventually collapse if I click the Second headline for a second time.

I can work around the problem by using "panel-collapse collapse" instead of "panel-collapse collapse in" for the first headline, however I would like to avoid having to do this as this reduces the usability of the page.

Any advise of what may be causing this anomaly?



    {% extends "base.html" %}
    {% import "bootstrap/wtf.html" as wtf %}

    <div class="page-header">
        <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    </div>

    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><div class="panel panel-default">
	    <div class="panel-heading" role="tab" id="headingOne">
	      <h4 class="panel-title">
	        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
	          1. Headline One
	        </a>
	      </h4>
	    </div>
	    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
	      <div class="panel-body">
	            Some text
	      </div>
	    </div>
	  </div>
	  <div class="panel panel-default">
	    <div class="panel-heading" role="tab" id="headingTwo">
	      <h4 class="panel-title">
	        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
	          2. Second headline
	        </a>
	      </h4>
	    </div>
	    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
	      <div class="panel-body">
	          Some more text
	      </div>
	    </div>
	  </div>
	</div>