jQuery Snippet To Create A Responsive Show/Hide Toggle Plugin

declarativeToggle is a jQuery snippet that makes it easy to reveal sections of content in the click/tap event (think mobile navigation menus on responsive sites). Add Show/Hide functionality without writing a single line of JavaScript using data attributes.

showhide div with animation javascript, jquery show hide animation slide, javascript showhide div by class, jquery showhide list items, show hide div jquery by id

jQuery Plugin That Transforms A HTML Select Input Into A Toggleable Button

How to make use of it:

1. Load the jQuery library and jQuery signatureativeToggle plug-in into your document.

<script src="https://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 the content.

<span data-toggle-target="#example-1" data-toggle-text"Read less">Read more</span>

3. Insert your content into the DIV container which is the target of the toggle button.

<div id="example-1">
  ...
</div>

4. Required CSS styles to hide the content section on page load.

.toggle-btn-visible {
  position: static;
  visibility: visible;
}

.toggle-target-hidden { display: none; }

.toggle-target-expanded { display: block; }

5. You can adjust response 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; }

}

Responsive & Accessible jQuery Show/Hide Toggle Plugin, declarativeToggle Github, jquery show hidden element, onclick button show hide div using jquery, hide class in jquery