Making Expandable divs on Rooms page

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-target="#desc-{{session_id}} .collapse"

 <h4 style="background-color:{{{color}}}" class="sizeevent event">
// Write the element that should be clicked for expanding
<div class="session-speakers-list collapse">
  <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%;"/>

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.