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
   
Responsive & Accessible jQuery Show/Hide Toggle Plugin - declarativeToggle

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.