CSS-only solution for toggeling content section visibility.
Note: You can use either checkbox or radio-button in your sections. Radio-button will only allow one opened section while checkbox will allow multiple.
CSS-only solution for toggeling content section visibility.
Note: You can use either checkbox or radio-button in your sections. Radio-button will only allow one opened section while checkbox will allow multiple.
.accordion-icon - Use plus/minus signs to indicate toggaleable element
.accordion-boxes - Make boxes around alternatives
.accordion-list - Show accordion as list (with alternating colors)
<div class="accordion accordion-icon accordion-list">
<section class="accordion-section">
<input type="radio" name="active-section" id="accordion-section-1">
<label class="accordion-toggle" for="accordion-section-1">
<h2>First</h2>
</label>
<div class="accordion-content">
This is the content of the first accordion section
</div>
</section>
<section class="accordion-section">
<input type="radio" name="active-section" id="accordion-section-2">
<label class="accordion-toggle" for="accordion-section-2">
<h2>Second</h2>
</label>
<div class="accordion-content">
This is the content of the second accordion section
</div>
</section>
<section class="accordion-section">
<input type="radio" name="active-section" id="accordion-section-3">
<label class="accordion-toggle" for="accordion-section-3">
<h2>Third</h2>
</label>
<div class="accordion-content">
This is the content of the third accordion section
</div>
</section>
<section class="accordion-section">
<input type="radio" name="active-section" id="accordion-section-4">
<label class="accordion-toggle" for="accordion-section-4">
<h2>Fourth</h2>
</label>
<div class="accordion-content">
This is the content of the fourth accordion section
</div>
</section>
</div>CSS only modal box (exception for positioning).
.modal-backdrop-1 - Stripe color 1 as backdrop
.modal-backdrop-2 - Stripe color 2 as backdrop
.modal-backdrop-3 - Stripe color 3 as backdrop
.modal-backdrop-4 - Stripe color 4 as backdrop
.modal-backdrop-5 - Stripe color 5 as backdrop
.modal-backdrop-black - Black backdrop
.modal-backdrop-white - White backdrop
.modal-large - Big modal (100% width, 100vh height)
.modal-medium - Medium modal (70% width)
.modal-small - Small modal (50% width)
<a href="#modal-target">Modal!</a>
<div id="modal-target" class="modal modal-backdrop-black modal-medium" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<a class="btn btn-close" href="#close"></a>
<h2 class="modal-title">Modal title</h2>
</div>
<div class="modal-body">
<article>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
</div>
<div class="modal-footer">
<a href="#close" class="btn btn-default">Close</a>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
<a href="#close" class="backdrop"></a>
</div><!-- /.modal -->Tooltip on hover or focus.
Note: Using tooltip will set position of the element to relative.
[data-tooltip-top] - Tooltip above element
[data-tooltip-bottom] - Tooltip below element
[data-tooltip-left] - Tooltip to the left of element
[data-tooltip-right] - Tooltip to the right of element
<a href="#" data-tooltip="This is a tooltip below">Tooltip below</a><br>
<a href="#" data-tooltip="This is a tooltip above" data-tooltip-top>Tooltip above</a><br>
<a href="#" data-tooltip="This is a tooltip left" data-tooltip-left>Tooltip left</a><br>
<a href="#" data-tooltip="This is a tooltip right" data-tooltip-right>Tooltip right</a>