Toggleable

<div style="min-height: 70px;">
  <esl-toggleable id="toggleable1" body-class="toggleable-opened" close-on=".close-button" open="">
    <div class="alert alert-warning" role="alert">
      <strong>This is a toggleable.</strong> You can control it using the triggers below.
      <button type="button" class="close close-button" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
    </div>
  </esl-toggleable>
</div>
<div class="m-1">
  <p>Triggers</p>
  <div class="btn-container">
    <esl-trigger target="#toggleable1" mode="toggle" a11y-label-active="" a11y-label-inactive="expand" class="btn btn-sec-blue">Toggle</esl-trigger>
    <esl-trigger target="#toggleable1" mode="show" a11y-label-active="collapse" class="btn btn-sec-blue">Show</esl-trigger>
    <esl-trigger target="#toggleable1" mode="hide" aria-label="hide" class="btn btn-sec-blue">Hide</esl-trigger>
  </div>
</div>

import { ESLToggleable, ESLTrigger } from '@exadel/esl';
ESLToggleable.register();
ESLTrigger.register();