Get boba!
boba Version 1.7.2

Collapsibles

Collapsibles are useful for toggling information beneath headers.

Default Collapsible

Each collapsible can open and close independently.

Tip

Be sure that the input's type is checkbox and that each of the input's ids match their label's for!

  • Submenu Item 1
    • Nested Menu Item 1
    • Nested Menu Item 2
    • Nested Menu Item 3
  • Submenu Item 3
You can place anything inside of a collapsible component!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ultricies mauris. Donec posuere ultrices tortor. Aliquam fringilla tellus odio, nec vehicula mi placerat nec. Duis bibendum eget ipsum eget dapibus. Aenean sit amet dui at dolor condimentum sagittis.

Image 
<div class="collapsible">
    <input type="checkbox" class="collapsible-toggle" id="first-collapsible" name="collapsible-checkbox" checked />
    <label class="collapsible-header" for="first-collapsible">
        First Collapsible
    </label>
    <div class="collapsible-body">
        <ul class="collapsible-submenu">
            <li>Submenu Item 1</li>
            <li>
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-toggle" id="first-nested-collapsible" name="collapsible-checkbox" />
                    <label class="collapsible-header" for="first-nested-collapsible">
                        Submenu Item 2 (Click me!)
                    </label>
                    <div class="collapsible-body">
                        <ul class="collapsible-submenu">
                            <li>Nested Menu Item 1</li>
                            <li>Nested Menu Item 2</li>
                            <li>Nested Menu Item 3</li>
                        </ul>
                    </div>
                </div>
            </li>
            <li>Submenu Item 3</li>
        </ul>
    </div>
</div>

<div class="collapsible">
    <input type="checkbox" class="collapsible-toggle" id="second-collapsible" name="collapsible-checkbox" checked />
    <label class="collapsible-header" for="second-collapsible">
        Second Collapsible
    </label>
    <div class="collapsible-body">
        <h5>You can place anything inside of a collapsible component!</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ultricies mauris. Donec posuere ultrices tortor. Aliquam fringilla tellus odio, nec vehicula mi placerat nec. Duis bibendum eget ipsum eget dapibus. Aenean sit amet dui at dolor condimentum sagittis.</p>
    </div>
</div>

<div class="collapsible">
    <input type="checkbox" class="collapsible-toggle" id="third-collapsible" name="collapsible-checkbox" checked />
    <label class="collapsible-header" for="third-collapsible">
        Third Collapsible
    </label>
    <div class="collapsible-body">
        <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97100&w=200&h=100" alt="Image">
    </div>
</div>

Mutually-Exclusive Collapsible

Only one collapsible in a group can be open at a time.

Tip

Note that once any of the collapsibles in the group are opened, one collapsible will remain open at all times.

Be sure that the input's type is radio, that each of the input's ids match their label's for, and that each of the inputs have the same name!

  • Submenu Item 1
    • Nested Menu Item 1
    • Nested Menu Item 2
    • Nested Menu Item 3
  • Submenu Item 3
You can place anything inside of a collapsible component!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ultricies mauris. Donec posuere ultrices tortor. Aliquam fringilla tellus odio, nec vehicula mi placerat nec. Duis bibendum eget ipsum eget dapibus. Aenean sit amet dui at dolor condimentum sagittis.

Image 
<div class="collapsible">
    <input type="radio" class="collapsible-toggle" id="first-me-collapsible" name="collapsible-radio" checked />
    <label class="collapsible-header" for="first-me-collapsible">
        First Collapsible
    </label>
    <div class="collapsible-body">
        <ul class="collapsible-submenu">
            <li>Submenu Item 1</li>
            <li>
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-toggle" id="first-me-nested-collapsible" name="collapsible-checkbox" />
                    <label class="collapsible-header" for="first-me-nested-collapsible">
                        Submenu Item 2 (Click me!)
                    </label>
                    <div class="collapsible-body">
                        <ul class="collapsible-submenu">
                            <li>Nested Menu Item 1</li>
                            <li>Nested Menu Item 2</li>
                            <li>Nested Menu Item 3</li>
                        </ul>
                    </div>
                </div>
            </li>
            <li>Submenu Item 3</li>
        </ul>
    </div>
</div>

<div class="collapsible">
    <input type="radio" class="collapsible-toggle" id="second-me-collapsible" name="collapsible-radio" />
    <label class="collapsible-header" for="second-me-collapsible">
        Second Collapsible
    </label>
    <div class="collapsible-body">
        <h5>You can place anything inside of a collapsible component!</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ultricies mauris. Donec posuere ultrices tortor. Aliquam fringilla tellus odio, nec vehicula mi placerat nec. Duis bibendum eget ipsum eget dapibus. Aenean sit amet dui at dolor condimentum sagittis.</p>
    </div>
</div>

<div class="collapsible">
    <input type="radio" class="collapsible-toggle" id="third-me-collapsible" name="collapsible-radio" />
    <label class="collapsible-header" for="third-me-collapsible">
        Third Collapsible
    </label>
    <div class="collapsible-body">
        <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97100&w=200&h=100" alt="Image">
    </div>
</div>

Styles

Take your collapsible components to the next level with these classes.

Styled Collapsible

Make your collapsible components stand out by adding the .styled class.
  • Submenu Item 1
    • Nested Menu Item 1
    • Nested Menu Item 2
    • Nested Menu Item 3
  • Submenu Item 3
You can place anything inside of a collapsible component!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ultricies mauris. Donec posuere ultrices tortor. Aliquam fringilla tellus odio, nec vehicula mi placerat nec. Duis bibendum eget ipsum eget dapibus. Aenean sit amet dui at dolor condimentum sagittis.

Image 
<div class="collapsible styled">
    <input type="checkbox" class="collapsible-toggle" id="first-styled-collapsible styled" name="collapsible-checkbox" checked />
    <label class="collapsible-header" for="first-styled-collapsible styled">
        First Collapsible
    </label>
    <div class="collapsible-body">
        <ul class="collapsible-submenu">
            <li>Submenu Item 1</li>
            <li>
                <div class="collapsible styled">
                    <input type="checkbox" class="collapsible-toggle" id="first-styled-nested-collapsible styled" name="collapsible-checkbox" />
                    <label class="collapsible-header" for="first-styled-nested-collapsible styled">
                        Submenu Item 2 (Click me!)
                    </label>
                    <div class="collapsible-body">
                        <ul class="collapsible-submenu">
                            <li>Nested Menu Item 1</li>
                            <li>Nested Menu Item 2</li>
                            <li>Nested Menu Item 3</li>
                        </ul>
                    </div>
                </div>
            </li>
            <li>Submenu Item 3</li>
        </ul>
    </div>
</div>

<div class="collapsible styled">
    <input type="checkbox" class="collapsible-toggle" id="second-styled-collapsible styled" name="collapsible-checkbox" checked />
    <label class="collapsible-header" for="second-styled-collapsible styled">
        Second Collapsible
    </label>
    <div class="collapsible-body">
        <h5>You can place anything inside of a collapsible component!</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ultricies mauris. Donec posuere ultrices tortor. Aliquam fringilla tellus odio, nec vehicula mi placerat nec. Duis bibendum eget ipsum eget dapibus. Aenean sit amet dui at dolor condimentum sagittis.</p>
    </div>
</div>

<div class="collapsible styled">
    <input type="checkbox" class="collapsible-toggle" id="third-styled-collapsible styled" name="collapsible-checkbox" checked />
    <label class="collapsible-header" for="third-styled-collapsible styled">
        Third Collapsible
    </label>
    <div class="collapsible-body">
        <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97100&w=200&h=100" alt="Image">
    </div>
</div>

Colored, Styled Collapsible

Give your styled collapsible components a splash of color using boba's vibrant color palette.
  • Submenu Item 1
    • Nested Menu Item 1
    • Nested Menu Item 2
    • Nested Menu Item 3
  • Submenu Item 3
You can place anything inside of a collapsible component!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ultricies mauris. Donec posuere ultrices tortor. Aliquam fringilla tellus odio, nec vehicula mi placerat nec. Duis bibendum eget ipsum eget dapibus. Aenean sit amet dui at dolor condimentum sagittis.

Image 
<div class="collapsible styled orange">
    <input type="checkbox" class="collapsible-toggle" id="first-colored-styled-collapsible styled" name="collapsible-checkbox" checked />
    <label class="collapsible-header" for="first-colored-styled-collapsible styled">
        First Collapsible
    </label>
    <div class="collapsible-body">
        <ul class="collapsible-submenu">
            <li>Submenu Item 1</li>
            <li>
                <div class="collapsible styled">
                    <input type="checkbox" class="collapsible-toggle" id="first-colored-styled-nested-collapsible styled" name="collapsible-checkbox" />
                    <label class="collapsible-header" for="first-colored-styled-nested-collapsible styled">
                        Submenu Item 2 (Click me!)
                    </label>
                    <div class="collapsible-body">
                        <ul class="collapsible-submenu">
                            <li>Nested Menu Item 1</li>
                            <li>Nested Menu Item 2</li>
                            <li>Nested Menu Item 3</li>
                        </ul>
                    </div>
                </div>
            </li>
            <li>Submenu Item 3</li>
        </ul>
    </div>
</div>

<div class="collapsible styled purple">
    <input type="checkbox" class="collapsible-toggle" id="second-colored-styled-collapsible styled" name="collapsible-checkbox" checked />
    <label class="collapsible-header" for="second-colored-styled-collapsible styled">
        Second Collapsible
    </label>
    <div class="collapsible-body">
        <h5>You can place anything inside of a collapsible component!</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ultricies mauris. Donec posuere ultrices tortor. Aliquam fringilla tellus odio, nec vehicula mi placerat nec. Duis bibendum eget ipsum eget dapibus. Aenean sit amet dui at dolor condimentum sagittis.</p>
    </div>
</div>

<div class="collapsible styled pink">
    <input type="checkbox" class="collapsible-toggle" id="third-colored-styled-collapsible styled" name="collapsible-checkbox" checked />
    <label class="collapsible-header" for="third-colored-styled-collapsible styled">
        Third Collapsible
    </label>
    <div class="collapsible-body">
        <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97100&w=200&h=100" alt="Image">
    </div>
</div>