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