Custom jQuery plugin and CSS to display and hide content
The requirement : We need to show a collapsable content when we clicked ‘Show’ button, and hide the collapsable content when we clicked ‘Hide’ button.
The solution : Create a custom jQuery plugin.
Demo : Clicks on the “show” button.
Here’s the alternative solution – jQuery toggle() function.
1. Collapsable content
Below is an example of HTML for collapsable content:
<section class="round-border">
<h2>Use jQuery + CSS to hide/show collapse content</h2>
<div>
<button href="#collapse2" class="nav-collapse">Show</button>
</div>
<div id="collapse2" class="collapse">
<p>Bla bla bla bla</p>
</div>
</section>
The “div” element in above <div id="collapse2" class="collapse">
is hide. Where the CSS “collapse” is having “display:none
” like in below:
.collapse {
display: none;
position: relative;
overflow: hidden;
}
The <div> is hide when it is having “collapse” CSS classname.
2. Custom jQuery Plugin
In order to show the content when we clicked the ‘Show’ button, we need to create a click event for ‘Show’ button like in below:
$('.nav-collapse').click(function(){
//logic to show/hide collapsable content
});
First, we need to get the selector of collapsed content from attribute href:
var collapse_content_selector = $(this).attr('href');
Then, we use jQuery to check whether the collapsable content element is having “show” CSS classname:
var collapse_content = $(collapse_content_selector);
if(collapse_content.hasClass('show')){
//logic to hide the collapsable content
}else{
//logic to show the collapsable content
}
In order to hide the collapsable content, we need to remove the CSS classname ‘show’ like in below:
collapse_content.removeClass('show');
In order to show the collapsable content, we need to add the CSS classname ‘show’ like in below:
collapse_content.addClass('show');
Where CSS “show” is used to change the css properties “display” to be “block” like in below:
.show{
display: block;
}
To make the collapsable content to be shown when page is loaded, we need to add “show” CSS classname like
<div class="collapse show">....</div>
.
Lastly, we need a callback function to facilitate button label to be ‘Hide/Show’. Example:
Callback function when collapsable content is shown:
$('.nav-collapse').html('Hide');//change the button label to be 'Hide'
Callback function when collapsable content is hide:
$('.nav-collapse').html('Show');//change the button label to be 'Show'
Therefore, we need to pass in callback functions into jQuery plugin like:
{
onShow: function(){
$(this).html('Hide');//change the button label to be 'Hide'
},
onHide: function(){
$(this).html('Show');//change the button label to be 'Show'
}
}
Below is the final source code of plugin:
(function($) {
$.fn.collapse=function(options){
$(this).click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown
var collapse_content = $(collapse_content_selector);
if(collapse_content.hasClass('show')){
collapse_content.removeClass('show');
$(this).html('Show');
if(options && options.onHide){
options.onHide();
}
}else{
collapse_content.addClass('show');
if(options && options.onShow){
options.onShow();
}
}
});
}
}(jQuery));
and jQuery to use the plugin:
$('.nav-collapse').collapse({
onShow: function(){
$(this).html('Hide');//change the button label to be 'Hide'
},
onHide: function(){
$(this).html('Show');//change the button label to be 'Show'
}
});
3. Full Example
<html>
<head>
<title>Use jQuery + CSS to display and hide content</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function() {
$('.nav-collapse').collapse({
onShow: function(){
$(this).html('Hide');//change the button label to be 'Hide'
},
onHide: function(){
$(this).html('Show');//change the button label to be 'Show'
}
});
});
(function($) {
$.fn.collapse=function(options){
$(this).click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown
var collapse_content = $(collapse_content_selector);
if(collapse_content.hasClass('show')){
collapse_content.removeClass('show');
$(this).html('Show');
if(options && options.onHide){
options.onHide();
}
}else{
collapse_content.addClass('show');
if(options && options.onShow){
options.onShow();
}
}
});
}
}(jQuery));
</script>
<style>
.collapse {
display: none;
position: relative;
overflow: hidden;
}
.show{
display: block;
}
.round-border {
border: 1px solid #eee;
border: 1px solid rgba(0, 0, 0, 0.05);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 10px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<section class="round-border">
<h2>Use jQuery + CSS to hide/show collapse content</h2>
<div>
<button href="#collapse2" class="nav-collapse">Show</button>
</div>
<div id="collapse2" class="collapse">
<p>Bla bla bla bla</p>
</div>
</section>
</body>
</html>
It Would have been nice with some ease effect to collapse and show the hidden content.
Hi, the button text isn’t updating?
Hello,
Nice tutorial. May be we could update the script to have a SHOW( for hidden text) and HIDE (when the text is displayed9 on the button?