Responsive & Accessible jQuery Show/Hide Toggle Plugin - declarativeToggle
File Size: | 5.17 KB |
---|---|
Views Total: | 10247 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
declarativeToggle is a jQuery plugin which allows you to expand and collapse block-level elements with a single button. You can use this plugin for your responsive mobile website / web application that automatically hides long content and reveals it again by one click, similar to the read more/read less plugin. Disable Javascript in your browser you'll see all content without the toggle button.
Basic Usage:
1. Load jQuery library and the jQuery declarativeToggle plugin in your document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="jquery.declarativeToggle.js"></script>
2. Create a toggle button. Use data-toggle-target to specify the target section of content.
<span data-toggle-target="#example-1" data-toggle-text"Read less">Read more</span>
3. Insert your content into a DIV container which is the target of the toggle button.
<div id="example-1"> ... </div>
4. The required CSS styles to hide the section of content on page load.
.toggle-btn-visible { position: static; visibility: visible; } .toggle-target-hidden { display: none; } .toggle-target-expanded { display: block; }
5. You can set the responsive behavior using CSS3 media queries.
@media screen and (max-width: 767px) { .toggle-btn-visible { position: static; visibility: visible; } .toggle-target-hidden { display: none; } .toggle-target-expanded { display: block; } }
This awesome jQuery plugin is developed by LearnWebCode. For more Advanced Usages, please check the demo page or visit the official website.