Show & Hide Content With The jQuery simplehide.js Pluing
| File Size: | 7.59 KB |
|---|---|
| Views Total: | 207 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
No matter what the occasion or reason is, you may want to hide the content of your web page. This can be a small piece of text or entire sections.
simplehide.js is a lightweight jQuery plugin to hide any content under a trigger link, which enables users to reveal the hidden content with a single click. Perfect for hiding spoilers from your blog posts.
How to use it:
1. Download and load the minified version of the simplehide.js plugin after jQuery.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/simplehide.min.js"></script>
2. Add your content to be hidden into block elements like DIV containers or even custom HTML tags as follows:
<div id="example-1"> <h2>Rich Content</h2> <img src="https://source.unsplash.com/Ta5II09WSrA/400x300" /> </div> <customhtmltag> Custom html tag </customhtmltag>
3. Call the function simplehide function and the plugin will do the rest.
$(function(){
$('#example').simplehide();
$('customhtmltag').simplehide();
});
4. Customize the reveal link.
$(function(){
$('#example').simplehide({
showLink: '<a href="#">Reveal...</a>'
});
});
This awesome jQuery plugin is developed by rwoloszyn. For more Advanced Usages, please check the demo page or visit the official website.











