Show Hides

SUI show/hides and SUI tabs have a lot in common. Due to space limitations on tabs are presented as show/hides on small screen sizes. As such, we use the same Javascript to dynamically add the tab markup, functionality and associated attributes which make tabs more accessible.

When using show/hides on desktop we hide the dynamically added tab markup which we don't need. This is why inspecting the following examples you will see some things which aren't actually visible.

If you are not using the SUI Javascript and you don't need tabs then you will simply need to add a little toggle functionality. Here is an example of the raw markup, onClick of the title you will need to toggle the .hidden class on the .bc-show-hide-content container. Note that the tabindex="0" is required in order to make the title keyboard accessible but you will need to ensure that hitting the enter key also toggles the class in the same way that onClick does.

    <div class="bc-show-hides full-width-xs">
      <section class="bc-show-hide is-active">
        <h2 class="bc-show-hide-title" tabindex="0">First show hide title </small>Small text</small>
          <span class="bc-show-hide-subtitle">Subtitle</span>
        </h2>

        <div class="bc-show-hide-content hidden">
          <div class="bc-show-hide-body">
            <p>Content here.</p>
          </div>
        </div>
      </section>
    </div>
    <section class="bc-show-hide">...</section>
    <section class="bc-show-hide">...</section>

Show/hides can be used inside inside a .well, not that we have removed the .full-width-xs class from the show/hide in this scenario as there is one on the .well instead.