Accordion

Accordion

Usage

Default

<!-- Accordion -->
<div class="ui-accordion" data-mode="AllOpened">
  <!-- Accordion button -->
  <button class="ui-accordion__btn">...</button>

  <!-- Accordion panel -->
  <!-- the accordion panel is hidden by default, visibility is toggled using JS -->
  <div class="ui-accordion__panel">
    <!-- title goes here -->
    <h2 class="ui-accordion__title">...</h2>

    <!-- text content goes here -->
    <!-- you can use generic styling classes to adjust layout, ex: grid, margin/padding utility classes, etc... -->
    <p class="ui-accordion__text">...</p>
    
    <a class="ui-link ui-link--underline" href="#">...</a>
    
    <table class="ui-table">
      <tbody>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
      </tbody>
    </table>

  </div>
</div>

Custom class

<!-- In case of adding a custom class to the plugin, it should be initialized with option: -->

window.refinitiv_ui_plugins.Accordion({customClass: "custom-class"});

<!-- the "custom-class" will be added to the wrapping div -->

<!-- Accordion -->
<div class="ui-accordion custom-class" data-mode="AllOpened">

</div>

Accordion opening mode

<!-- All the accordion buttons can be active at the same time by default ("AllOpened"). If only one button should be active, -->
<!-- set data-mode attribute of the wrapping div to "onlyOneOpened": -->

<!-- Accordion -->
<div class="ui-accordion" data-mode="onlyOneOpened">

</div>