Showing partial text in bootstrap collapse accordion

Question

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>

Answer 1

Sure you can! Accordions are just collapse controls 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

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>

Answer 2

I don't know if i've understood you right, but do you want to show a teaser text under the title? Why not just add the text to the panel-titel with jquery:

<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 role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. 
      </div>
    </div>
  </div>
</div>

$(function(){
    $("#accordion .panel").each(function(){
        var thispanel = $(this);
        var titletext = thispanel.find(".panel-body").text().substring(1, 100) + " ... click to read more";
        thispanel.find("h4.panel-title a").html(titletext);
    });
});