Creating an accordion where main content is partially visible before collapsing

Question

I'm trying to create an accordion where a first part of the content is already visible before you collapse it.

The problem is that I just have no idea where to start this. A basic accordion is easy, but how can I display the beginning of the content (e.g the first 30 characters of the content greyed out) before the accordion is collapsed ?

I started with the structure suggested with a "teaser" from this post. I'd like that "teaser" to be the first couple characters shown from the content and when you click to collapse, the main content is displayed and the teaser disappears.

Any idea how to do that ?

<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">
          Why a rose is what you need
        </a>
      </h4>
    </div>
    <div class="panel-teaser panel-body" style="color:#d9d9d9" >
   A rose is the ideal flower you need because...
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" 
         role="tabpanel" aria-labelledby="headingOne">

      <div class="panel-body">
    A rose is the ideal flower you need because it's the flower all girls love to get. Offer one for Valentine's Day and she'll be yours blablabla
      </div>
    </div>
  </div>
</div>

score 0 · Accepted Answer · answered Dec 07 '20 at 19:54

Parting from your code a made a simple example using javascript to toogle between show and hide the content. I created a function that uses the elements IDs to select em and toogle a hide class. Then I passed this function to your a element.

var expandable = function() {
  var panelContent = document.getElementById("content-body");
  panelContent.classList.toggle("hidden");

  var panelBody = document.getElementById("content-head");
  panelBody.classList.toggle("hidden");
}

.hidden {
  display: none;
}

<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" onclick="expandable()" aria-expanded="true" aria-controls="collapseOne">
          Why a rose is what you need
        </a>
      </h4>
    </div>
    <div id="content-head" class="panel-teaser panel-body" style="color:#d9d9d9">
      A rose is the ideal flower you need because...
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

      <div id="content-body" class="panel-body hidden">
        A rose is the ideal flower you need because it's the flower all girls love to get. Offer one for Valentine's Day and she'll be yours blablabla
      </div>
    </div>
  </div>
</div>

Thanks, this is what I was looking for. Now it's just some fine tuning ! — Seb, Dec 07 '20 at 20:31
i need same scenario but without text repetition i.e there should be one paragraph with show truncated and on click shows full and alos with 100 char limit. — Awais, May 23 '22 at 13:00

Creating an accordion where main content is partially visible before collapsing

1 Answers1