The Open-Event Webapp provides the information about different Session Venues inside Rooms page. The idea was to provide information related to each Venue in a better way. For that, the expandable sessions are the best way.

To make a div expandable using bootstrap, we have written the following code:

 <div class="room-container"
 data-toggle="collapse"
 data-target="#desc-{{session_id}} .collapse"
 aria-expanded="false"
 aria-controls="desc-{{session_id}}">

 <h4 style="background-color:{{{color}}}" class="sizeevent event">
 {{title}}
 </h4>
// Write the element that should be clicked for expanding
<div class="session-speakers-list collapse">
  {{#speakers_list}}
  <a href="speakers.html#{{id}}">
  <p class="session-speakers-less">
  {{#if photo}}
    <p style="margin-right:20px" class="session-speakers">
     <img onError="this.onerror=null;this.src='./dependencies/avatar.png';" class="card-img-top" src="{{photo}}" style="width:10rem; height:10rem; border-radius:50%;"/>
     </p>
    {{/if}}
    </p>
   </a>
  </div>
</div>

The class ‘.collapse’  will be added to the DOM Elements that will be expanded on click. That’s the easiest way to make a div expandable on click.