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 : jQuery toggle() function.
Demo : Clicks on the “show” button.
1. Collapsable Content
Below is an example of HTML for collapsable content:
<section class="round-border">
<h2>Use jQuery toggle to hide/show collapse content</h2>
<div>
<button href="#collapse1" class="nav-toggle">Show</button>
</div>
<div id="collapse1" style="display:none">
<p>Bla bla bla bla</p>
</div>
</section>
The “div” element in above <div id="collapse1" style="display:none"> is hided. 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-toggle').click(function(){
//logic to show/hide collapsable content
});
2. Get The Selector
Get the selector of collapsed content from attribute href:
var collapse_content_selector = $(this).attr('href');
3. Toggle to Display and Hide
Uses jQuery toggle to show/hide the collapsable content like in below:
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
toggle_switch.html('Show');//change the button label to be 'Show'
}else{
toggle_switch.html('Hide');//change the button label to be 'Hide'
}
});
4. Full Example
<html>
<head>
<title>jQuery toggle 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-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
//change the button label to be 'Show'
toggle_switch.html('Show');
}else{
//change the button label to be 'Hide'
toggle_switch.html('Hide');
}
});
});
});
</script>
<style>
.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>jQuery toggle() to hide/show collapse content</h2>
<div>
<button href="#collapse1" class="nav-toggle">Show</button>
</div>
<div id="collapse1" style="display:none">
<p>Bla bla bla bla</p>
</div>
</section>
</body>
</html>
Download Source Code
Download it – jQuery-toggle-to-display-hide-content.zip (1kb)
Hi Jack, great explanation of this much-needed functionality. I’ve implemented your code in the jsfiddle. https://jsfiddle.net/halukkaramete/qr3d9gzy/11/ But there is a flicker happening in the code when the toggle event is complete.
This is a common flicker just like in many other toggle implementations, I have seen countless of times.
What can we do about it?
Hello,
I tried with above example here it is reloading the page, I need example like on clicking of specific link i need to display one DIV .
If you have any of the link please share to me.
hello how to save state in cookies ?
regards
I realise that this comment is about 3 years after the fact but (depending on the use), you may want to substitute the .toggle() method with .slideToggle() method instead (http://api.jquery.com/slidetoggle/). I just don’t like the scaling from the top left corner effet.
Anyone have an idea of how to do this with multiple div tags? I would like to be able to click link 1 to show div 1 and if div 1 is showing and I click link 2, div 1 would hide then div 2 would show. Basically so if I do this with multiple links and I don’t hide them, I don’t have a big stack of showing div tags with content. Any help would be great
thanks for code
does anyone know how i can change the effect on this? its not very nice im trying to show and hide forms so the form elements look really crap with this effect. a simple slide or fade effect would be better. can someone help me? thank u
Thank for your Simple Examples
Really well done example! I’m using the toggle on my website and I’d like to add a function that hide automatically the previous text part as I’m clicking “show” on the further text, so the user has not to re-click every time on the same button to hide it. I didn’t found out how to implement this. Do you know how to do that? Thanks in advance!
you can find some more details in the below link,”http://javadomain.in/jquery-showhide-example-in-jsf/”
Thanks so much… Simple and beautiful!
I am trying to get your code to show/hide different section through my documets at once, but it seem it is only handling 1. Is there some thing I can do?
I would also like to know, great tutorial though!
Is there a way to change the direction that the hidden content animates in from? I’d like it to come straight down as opposed to expanding from the top left.
Hello,
Its a nice article. Here I am sharing a link about how to Show and Hide a Div and Animate a Panel simultaneously.
http://www.encodedna.com/2013/02/jquery-show-hide-div-animate-panel.htm
Arun
Hello,
thats some great code… id like to save the state into a cookie, how would you do this?
im using the jquery plugin “jquery.cookie.js”.
Thank you
Yves
Thanks 🙂
Thank you very much. I searched all over the internet about all this things. But your tutorial are the only one working. Thanks again. Cheers! 🙂
nice tuts many many thanks
Hi
How do I get this working in ie8??
It seems like it can’t pick up the “block” command!
Otherwise an excellent script!!!!!
Hi can i use this function without document.ready() function ?
In our web we can use multiple ready functions.
thanks
I was looking for something like this since I love jquery and I found it. Great List!
How can I replace that ‘Show’ button with my own image?
This is great, simple – thanks!