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.

Note
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;
}
Note
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;	
}
Note
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>

Download Source Code

References

  1. jQuery toggle function to display and hide content
  2. Create a jQuery plugin

About the Author

author image
JackLok
Co-founder of penefit.com.

Comments

avatar
3 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Oscar GrajedaLgtLunang Recent comment authors
newest oldest most voted
Oscar Grajeda
Guest
Oscar Grajeda

It Would have been nice with some ease effect to collapse and show the hidden content.

Lgt
Guest
Lgt

Hi, the button text isn’t updating?

Lunang
Guest
Lunang

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?