Skip to main content

Collapsible panels

Purpose

Users need to see only relevant content.

Description

Collapsible panels provide users with the ability to expand and collapse content as needed. They can simplify the interface by hiding content until it is needed.

Behaviors

Collapsible panels can operate as either single-select (accordion) or multi-select.

  • Single-select allows only one panel to be expanded at any given time. Expanding a panel collapses the previously expanded panel. This is commonly referred to as an “Accordion”.
  • Multi-select allows more than one panel to be expanded at any given time. Expanding a panel has no impact on the other panels.
    • Expand/collapse all allows all panels to be expanded or collapsed simultaneously. It is important to note when all panels are in a “open” or “closed” state, the corresponding button should be disabled. When there are panels in both “open” and “closed” states, both buttons are enabled.

Expand/collapse all

Expand all | Collapse all

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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Example HTML usage: 
<!--Accordion-->
<div class="panel-toggler mb-2">
  <a href="" id="expand-all">Expand all</a>&nbsp;|&nbsp;<a
    href=""
    id="collapse-all"
    >Collapse all</a
  >
</div>
<div class="accordion" id="myAccordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h3 class="accordion-heading icon-right">
        <button
          class="btn btn-light btn-block text-left"
          type="button"
          data-toggle="collapse"
          data-target="#collapseOne"
          aria-expanded="true"
          aria-controls="collapseOne"
        >
          Goods/Services
          <i class="material-icons collapsed-icon">add</i>
          <i class="material-icons expanded-icon">remove</i>
        </button>
      </h3>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
      <div class="card-body">
        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. Nihil anim keffiyeh
        helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
        proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
        beer farm-to-table, raw denim aesthetic synth nesciunt you probably
        haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h3 class="accordion-heading icon-right">
        <button
          class="btn btn-light btn-block text-left collapsed"
          type="button"
          data-toggle="collapse"
          data-target="#collapseTwo"
          aria-expanded="false"
          aria-controls="collapseTwo"
        >
          Mark info <i class="material-icons collapsed-icon">add</i>
          <i class="material-icons expanded-icon">remove</i>
        </button>
      </h3>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
      <div class="card-body">
        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. Nihil anim keffiyeh
        helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
        proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
        beer farm-to-table, raw denim aesthetic synth nesciunt you probably
        haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h3 class="accordion-heading icon-right">
        <button
          class="btn btn-light btn-block text-left collapsed"
          type="button"
          data-toggle="collapse"
          data-target="#collapseThree"
          aria-expanded="false"
          aria-controls="collapseThree"
        >
          Owner/Assignment <i class="material-icons collapsed-icon">add</i>
          <i class="material-icons expanded-icon">remove</i>
        </button>
      </h3>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree">
      <div class="card-body">
        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. Nihil anim keffiyeh
        helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
        proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
        beer farm-to-table, raw denim aesthetic synth nesciunt you probably
        haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Styles

Standard

The standard style provides more distinction between the panel and internal/surrounding content. This is useful for more complex layouts.

Borderless

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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Example HTML usage: 
<!--Borderless accordion-->
<div class="accordion" id="borderlessAccordionExample">
  <div class="card card-borderless">
    <div class="card-header" id="headingFour">
      <h3 class="accordion-heading icon-right">
        <button
          class="btn btn-light btn-block text-left"
          type="button"
          data-toggle="collapse"
          data-target="#collapseFour"
          aria-expanded="true"
          aria-controls="collapseFour"
        >
          Goods/Services <i class="material-icons collapsed-icon">add</i>
          <i class="material-icons expanded-icon">remove</i>
        </button>
      </h3>
    </div>
    <div
      id="collapseFour"
      class="collapse show"
      aria-labelledby="headingFour"
      data-parent="#borderlessAccordionExample"
    >
      <div class="card-body">
        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. Nihil anim keffiyeh
        helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
        proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
        beer farm-to-table, raw denim aesthetic synth nesciunt you probably
        haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card card-borderless">
    <div class="card-header" id="headingFive">
      <h3 class="accordion-heading icon-right">
        <button
          class="btn btn-light btn-block text-left collapsed"
          type="button"
          data-toggle="collapse"
          data-target="#collapseFive"
          aria-expanded="false"
          aria-controls="collapseFive"
        >
          Mark info <i class="material-icons collapsed-icon">add</i>
          <i class="material-icons expanded-icon">remove</i>
        </button>
      </h3>
    </div>
    <div
      id="collapseFive"
      class="collapse"
      aria-labelledby="headingFive"
      data-parent="#borderlessAccordionExample"
    >
      <div class="card-body">
        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. Nihil anim keffiyeh
        helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
        proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
        beer farm-to-table, raw denim aesthetic synth nesciunt you probably
        haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card card-borderless">
    <div class="card-header" id="headingSix">
      <h3 class="accordion-heading icon-right">
        <button
          class="btn btn-light btn-block text-left collapsed"
          type="button"
          data-toggle="collapse"
          data-target="#collapseSix"
          aria-expanded="false"
          aria-controls="collapseSix"
        >
          Owner/Assignment <i class="material-icons collapsed-icon">add</i>
          <i class="material-icons expanded-icon">remove</i>
        </button>
      </h3>
    </div>
    <div
      id="collapseSix"
      class="collapse"
      aria-labelledby="headingSix"
      data-parent="#borderlessAccordionExample"
    >
      <div class="card-body">
        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. Nihil anim keffiyeh
        helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
        proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
        beer farm-to-table, raw denim aesthetic synth nesciunt you probably
        haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Bordered

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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Example HTML usage: 
<!--Bordered accordion-->
<div class="accordion" id="borderedAccordionExample">
  <div class="card">
    <div class="card-header" id="headingSeven">
      <h3 class="accordion-heading icon-right">
        <button
          class="btn btn-light btn-block text-left"
          type="button"
          data-toggle="collapse"
          data-target="#collapseSeven"
          aria-expanded="true"
          aria-controls="collapseSeven"
        >
          Goods/Services <i class="material-icons collapsed-icon">add</i>
          <i class="material-icons expanded-icon">remove</i>
        </button>
      </h3>
    </div>
    <div
      id="collapseSeven"
      class="collapse show"
      aria-labelledby="headingSeven"
      data-parent="#borderedAccordionExample"
    >
      <div class="card-body">
        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. Nihil anim keffiyeh
        helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
        proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
        beer farm-to-table, raw denim aesthetic synth nesciunt you probably
        haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingEight">
      <h3 class="accordion-heading icon-right">
        <button
          class="btn btn-light btn-block text-left collapsed"
          type="button"
          data-toggle="collapse"
          data-target="#collapseEight"
          aria-expanded="false"
          aria-controls="collapseEight"
        >
          Mark info <i class="material-icons collapsed-icon">add</i>
          <i class="material-icons expanded-icon">remove</i>
        </button>
      </h3>
    </div>
    <div
      id="collapseEight"
      class="collapse"
      aria-labelledby="headingEight"
      data-parent="#borderedAccordionExample"
    >
      <div class="card-body">
        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. Nihil anim keffiyeh
        helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
        proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
        beer farm-to-table, raw denim aesthetic synth nesciunt you probably
        haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingNine">
      <h3 class="accordion-heading icon-right">
        <button
          class="btn btn-light btn-block text-left collapsed"
          type="button"
          data-toggle="collapse"
          data-target="#collapseNine"
          aria-expanded="false"
          aria-controls="collapseNine"
        >
          Owner/Assignment <i class="material-icons collapsed-icon">add</i>
          <i class="material-icons expanded-icon">remove</i>
        </button>
      </h3>
    </div>
    <div
      id="collapseNine"
      class="collapse"
      aria-labelledby="headingNine"
      data-parent="#borderedAccordionExample"
    >
      <div class="card-body">
        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. Nihil anim keffiyeh
        helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
        proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
        beer farm-to-table, raw denim aesthetic synth nesciunt you probably
        haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Multiselectable

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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Example HTML usage: 
<!--Multiselect accordion-->
<div class="accordion" id="multiselectAccordionExample">
  <div class="card card-borderless">
    <div class="card-header" id="heading-1">
      <h3 class="accordion-heading icon-right">
        <button
          class="btn btn-light btn-block text-left"
          type="button"
          data-toggle="collapse"
          data-target="#collapse-1"
          aria-expanded="true"
          aria-controls="collapse-1"
        >
          Goods/Services <i class="material-icons collapsed-icon">add</i>
          <i class="material-icons expanded-icon">remove</i>
        </button>
      </h3>
    </div>
    <div id="collapse-1" class="collapse show" aria-labelledby="heading-1">
      <div class="card-body">
        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. Nihil anim keffiyeh
        helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
        proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
        beer farm-to-table, raw denim aesthetic synth nesciunt you probably
        haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card card-borderless">
    <div class="card-header" id="heading-2">
      <h3 class="accordion-heading icon-right">
        <button
          class="btn btn-light btn-block text-left collapsed"
          type="button"
          data-toggle="collapse"
          data-target="#collapse-2"
          aria-expanded="false"
          aria-controls="collapse-2"
        >
          Mark info <i class="material-icons collapsed-icon">add</i>
          <i class="material-icons expanded-icon">remove</i>
        </button>
      </h3>
    </div>
    <div id="collapse-2" class="collapse" aria-labelledby="heading-2">
      <div class="card-body">
        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. Nihil anim keffiyeh
        helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
        proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
        beer farm-to-table, raw denim aesthetic synth nesciunt you probably
        haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card card-borderless">
    <div class="card-header" id="heading-3">
      <h3 class="accordion-heading icon-right">
        <button
          class="btn btn-light btn-block text-left collapsed"
          type="button"
          data-toggle="collapse"
          data-target="#collapse-3"
          aria-expanded="false"
          aria-controls="collapse-3"
        >
          Owner/Assignment <i class="material-icons collapsed-icon">add</i>
          <i class="material-icons expanded-icon">remove</i>
        </button>
      </h3>
    </div>
    <div id="collapse-3" class="collapse" aria-labelledby="heading-3">
      <div class="card-body">
        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. Nihil anim keffiyeh
        helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
        proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
        beer farm-to-table, raw denim aesthetic synth nesciunt you probably
        haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Left icons

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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Example HTML usage: 
<!--Left icon accordion-->
<div class="accordion" id="leftIconAccordionExample">
  <div class="card card-borderless">
    <div class="card-header" id="heading-4">
      <h3 class="accordion-heading">
        <button
          class="btn btn-light btn-block text-left"
          type="button"
          data-toggle="collapse"
          data-target="#collapse-4"
          aria-expanded="true"
          aria-controls="collapse-4"
        >
          <i class="material-icons collapsed-icon">chevron_right</i>
          <i class="material-icons expanded-icon">expand_more</i>
          Goods/Services
        </button>
      </h3>
    </div>
    <div id="collapse-4" class="collapse show" aria-labelledby="heading-5">
      <div class="card-body">
        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. Nihil anim keffiyeh
        helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
        proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
        beer farm-to-table, raw denim aesthetic synth nesciunt you probably
        haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card card-borderless">
    <div class="card-header" id="heading-5">
      <h3 class="accordion-heading">
        <button
          class="btn btn-light btn-block text-left collapsed"
          type="button"
          data-toggle="collapse"
          data-target="#collapse-5"
          aria-expanded="false"
          aria-controls="collapse-5"
        >
          <i class="material-icons collapsed-icon">chevron_right</i>
          <i class="material-icons expanded-icon">expand_more</i>
          Mark info
        </button>
      </h3>
    </div>
    <div id="collapse-5" class="collapse" aria-labelledby="heading-5">
      <div class="card-body">
        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. Nihil anim keffiyeh
        helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
        proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
        beer farm-to-table, raw denim aesthetic synth nesciunt you probably
        haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card card-borderless">
    <div class="card-header" id="heading-6">
      <h3 class="accordion-heading">
        <button
          class="btn btn-light btn-block text-left collapsed"
          type="button"
          data-toggle="collapse"
          data-target="#collapse-6"
          aria-expanded="false"
          aria-controls="collapse-6"
        >
          <i class="material-icons collapsed-icon">chevron_right</i>
          <i class="material-icons expanded-icon">expand_more</i>
          Owner/Assignment
        </button>
      </h3>
    </div>
    <div id="collapse-6" class="collapse" aria-labelledby="heading-6">
      <div class="card-body">
        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. Nihil anim keffiyeh
        helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
        proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
        beer farm-to-table, raw denim aesthetic synth nesciunt you probably
        haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Multitarget

First element

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Second element

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Example HTML usage: 
<!--Multitarget accordion-->
<p>
  <a
    class="btn btn-primary"
    data-toggle="collapse"
    href="#multiCollapseExample1"
    role="button"
    aria-expanded="false"
    aria-controls="multiCollapseExample1"
    >Toggle first element</a
  >
  <button
    class="btn btn-primary"
    type="button"
    data-toggle="collapse"
    data-target="#multiCollapseExample2"
    aria-expanded="false"
    aria-controls="multiCollapseExample2"
  >
    Toggle second element
  </button>
  <button
    class="btn btn-primary"
    type="button"
    data-toggle="collapse"
    data-target=".multi-collapse"
    aria-expanded="false"
    aria-controls="multiCollapseExample1 multiCollapseExample2"
  >
    Toggle both elements
  </button>
</p>
<div class="collapse multi-collapse mb-1" id="multiCollapseExample1">
  <div class="card card-body">
    <h3>First element</h3>
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
    richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
    anderson cred nesciunt sapiente ea proident.
  </div>
</div>
<div class="collapse multi-collapse" id="multiCollapseExample2">
  <div class="card card-body">
    <h3>Second element</h3>
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
    richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
    anderson cred nesciunt sapiente ea proident.
  </div>
</div>