Toggle Container
This is for hiding and showing content, like a disclosure container
Toggle Container Sample(s):
How do I purchase an insurance policy?
Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam, aut quaerat rerum numquam quisquam nam illo aliquid repudiandae maxime nostrum aspernatur deserunt at quasi, ad omnis. Temporibus atque eos ratione.
How do I purchase an insurance policy?
Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.
How do I purchase an insurance policy?
Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.
<div class="toggle-container">
<div role="button" tabindex="0" aria-pressed="false" class="toggle-header" data-toggle-trigger="a-unique-string">
<div class="toggle-header-text">How do I purchase an insurance policy?</div>
<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icons-caret-down"></use></svg>
</div>
<div class="toggle-content" data-toggle-content="a-unique-string" hidden>
<p>Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam, aut quaerat rerum numquam quisquam nam illo aliquid repudiandae maxime nostrum aspernatur deserunt at quasi, ad omnis. Temporibus atque eos ratione.</p>
</div>
</div>
<div class="toggle-container">
<div role="button" tabindex="0" aria-pressed="false" class="toggle-header" data-toggle-trigger="a-different-string">
<div class="toggle-header-text">How do I purchase an insurance policy?</div>
<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icons-caret-down"></use></svg>
</div>
<div class="toggle-content" data-toggle-content="a-different-string" hidden>
<p>Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.</p>
<ul>
<li><a href="#">Some link somewhere</a></li>
<li><a href="#">Some other really important link</a></li>
<li><a href="#">Finally, the third link</a></li>
<li><a href="#">Here is the last</a></li>
</ul>
</div>
</div>
<div class="toggle-container">
<div role="button" tabindex="0" aria-pressed="false" class="toggle-header" data-toggle-trigger="some-other-string">
<div class="toggle-header-text">How do I purchase an insurance policy?</div>
<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icons-caret-down"></use></svg>
</div>
<div class="toggle-content pb-5 px-3 leading-normal" data-toggle-content="some-other-string" hidden>
Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.
</div>
</div>