Doggo Storybook 0.9.0

Disclosure Button

Renders a button that toggles the visibility of another element.

Read more Read less

Use this component to reveal or hide additional content, such as in collapsible sections or dropdown menus.

For a button that toggles other states, use toggle_button/1 instead. See also button/1 and button_link/1.

Usage

Set the controls attribute to the DOM ID of the element that you want to toggle with the button.

The initial state is hidden. Do not forget to add the hidden attribute to the toggled element. Otherwise, visibility of the element will not align with the aria-expanded attribute of the button.

<.disclosure_button controls="data-table">
  Data Table
</.disclosure_button>

CSS

To select disclosure buttons without class names and to apply styles depending on the state (e.g. to render a caret), you can use the aria-controls and aria-expanded attributes.

button[aria-controls][aria-expanded] {
  /* Base styles for disclosure buttons */
}

button[aria-controls][aria-expanded=”true”] { / Styles when content is visible / }

Default Open in playground 
<div>
  <div>
    <.disclosure_button controls="data-table-default">
      Learn More About Dog Breeds
    </.disclosure_button>
  </div>
  <table id="data-table-default" hidden>
  <tr>
    <th>Breed Name</th>
    <th>Origin</th>
    <th>Characteristic</th>
  </tr>
  <tr>
    <td>Labrador Retriever</td>
    <td>Canada</td>
    <td>Friendly and outgoing</td>
  </tr>
  <tr>
    <td>German Shepherd</td>
    <td>Germany</td>
    <td>Intelligent and versatile</td>
  </tr>
  <tr>
    <td>Beagle</td>
    <td>England</td>
    <td>Curious and merry</td>
  </tr>
</table>

</div>
Variant Open in playground 
<div>
  <div style="display: flex; flex-wrap: wrap; gap: 8px; align-items: center">
    <.disclosure_button variant="primary" controls="data-table-variant">
      primary
    </.disclosure_button>
    <.disclosure_button variant="secondary" controls="data-table-variant">
      secondary
    </.disclosure_button>
    <.disclosure_button variant="info" controls="data-table-variant">
      info
    </.disclosure_button>
    <.disclosure_button variant="success" controls="data-table-variant">
      success
    </.disclosure_button>
    <.disclosure_button variant="warning" controls="data-table-variant">
      warning
    </.disclosure_button>
    <.disclosure_button variant="danger" controls="data-table-variant">
      danger
    </.disclosure_button>
  </div>
  <table id="data-table-variant" hidden>
  <tr>
    <th>Breed Name</th>
    <th>Origin</th>
    <th>Characteristic</th>
  </tr>
  <tr>
    <td>Labrador Retriever</td>
    <td>Canada</td>
    <td>Friendly and outgoing</td>
  </tr>
  <tr>
    <td>German Shepherd</td>
    <td>Germany</td>
    <td>Intelligent and versatile</td>
  </tr>
  <tr>
    <td>Beagle</td>
    <td>England</td>
    <td>Curious and merry</td>
  </tr>
</table>

</div>