Show/hide toggle with jQuery and CSS3

Mar 6, 2011 by John Stephen Jones

Here’s a really simple way of showing and hiding content using jQuery with some nifty CSS3 to style it up.

You can see this in action on this site (scroll down to the bottom and click the ‘about me’ button).

Here I am going to show you how this is done using a really simple jQuery function and some CSS3. The great thing about this technique is that even with JavaScript turned off or even CSS turned off, you can still get the content delivered. Also i’ve used CSS3 instead of creating images for drop shadows and buttons which in itself can cut down on valuable development time and page load.

Note the CSS3 rules I am using will only show in the more funky modern browsers such as Firefox, Safari, Opera, and IE9. The older browsers will still display and function fine, but without the drop shadows, text shadows and rounded corners.

Open a text editor and create 3 files, name one index.html, the second style.css and the last one show.js. In index.html link these files up in the head of the document and also set a link to either a downloaded version of jQuery or the hosted Google API version.

The Mark Up

I’m going to set this up with 3 divs, the outer div (wrapper) is just a wrapper to centre it all up, the other two divs are for the box we are going to show and hide (showBox) and it’s contents (content). Really simple stuff. Just inside the wrapper is a link with the id of btn-slide, this is our button and jQuery hook which helps the magic happen.

1
2
3
4
5
6
7
8
9
10
11
12

<div class="wrapper">

<a href="#" id="btn-slide" title="Open">Open</a>

<div id="showBox">
<div class="content">
<h2>Hello there!</h2>
<p>This is a basic show hide toggle box using some jQuery and CSS3
properties such as text-shadow, opacity, rgba and border radius</p>
</div>
</div>
</div>

The CSS

Now I am an advocate of a 3 layers approach, we have our first layer – the HTML so lets add our 2nd layer the CSS to give it some panache.

First I set up some basic defaults for font sizes and font type and then centre up our containing outer wrapper so it displays in the centre of the page.

1
2
3
4
5
6
7
8

/*Set up some basic defaults for this example*/
body {
font-size:62.5%;
font-family:Arial, helvetica, sans-serif}

.wrapper{
width:500px;
margin: 0 auto}

Styling the button

To create the button effect, I am using rgb background colours, some border radius and a little text shadow on the link itself. Experiment with the values on this for different effects. I’ve set this up for link, visited, hover and focus styles.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

/*CSS3 button styles*/

/*Link*/
a{
text-decoration:none;
outline:none;
font-weight:bold;
font-size:1.5em;
padding: .5em 20px;
background-color : rgb(143,58,58);
color : rgb(255,255,255);
text-shadow : 0 1px 1px rgb(0,0,0);
-webkit-border-radius:1em;
-moz-border-radius:1em;
border-radius:1em;
margin-bottom:20px}

/*Visited*/
a:visited {
color : rgb(255,255,255);
-webkit-border-radius:1em;
-moz-border-radius:1em;
border-radius:1em;
margin-bottom:20px;
outline:none;
text-decoration:none;}

/*Hover*/
a:hover {
background-color:rgb(119,48,48);
text-decoration:none;
outline:none;}

/*Focus*/
a:active:focus{
background-color:rgb(44,18,18);
color:rgb(255,255,255);
text-decoration:none;
outline:none;}

Now to set up the styles for our box and it’s contents. Again I am using some CSS3 styles to create 2 rounded corners, rgb background colour, text shadow and a drop shadow around the box.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/*Set the width of the box*/
#showBox{width:100%;}

/*Set the background styles for the content*/
.content{
background-color:rgb(57,53,70);
-webkit-border-top-right-radius:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-webkit-box-shadow:10px 10px 25px #333;
-moz-box-shadow:5px 5px 5px #333;
box-shadow:10px 10px 25px #333 ;
padding:5px;
margin-top:10px}

.content p{
padding:0px 10px 7px 15px;
font-size:1.5em;
text-align:left;
color:rgb(300,300,300);
text-shadow:0 2px 3px rgba(0,0,0,.8)}

.content h2{
padding:7px 10px 0px 15px;
font-size:2em;
text-align:left;
color:rgb(300,300,300);
text-shadow:0 2px 3px rgba(0,0,0,.8)}

If we ran this in a browser right now, it would be all styled up with our box showing and all content visible, it would look like this.
As you can see this is fine as with no JavaScript present we can still see and access the content as I’ve set the box to hide in the JavaScript and not in the CSS. If I had set this to be hidden in the CSS then it would not show any content and just the button would be visible and this would be a bad idea!

Adding jQuery

Now to add our 3rd layer – the jQuery.

First, I’m getting our content box #showBox and setting it to be hidden so that when the DOM loads the box is hidden from view.

Next I get and set what happens when the button link is clicked, I’m setting it to slide down slowly to display the content and when it is clicked again it slides up slowly hiding the content, all using .slideToggle.

Finally we deal with what happens after the button is clicked. When the box is open, the link text on the button toggles to display ‘close’, when it is clicked again it toggles to display ‘open’.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$(document).ready(function(){

//Hide the box
$("#showBox").hide();

//Sets up the click function and speed
$("#btn-slide").click(function(){
$("#showBox").slideToggle("slow",function(){

//Toggles link text between open and close
//=="Open" is vital in order to close the box
($("#btn-slide").html()=="Open")?$("#btn-slide").html("Close"):$("#btn-slide").html("Open");
});
return false;
});

});

Another great thing about this technique is If we set this all up and CSS styles were off and JavaScript on, then the show hide would still function, just without the styles – again we can still access all of our content.

View Full Demo

Tags: CSS3, featured, JavaScript, jQuery

9 Comments + Add Comment

Renai August 14, 2011 at 4:40 pm

Hi, nice post, I have this working, but what If i wanted to invert the process, so that the box was visibile and the first option was to ‘Close’ rather than ‘Open’ the div ?
THanks
John Stephen Jones August 14, 2011 at 9:22 pm

Hi Renai – thanks for visiting.
To reverse it is quite simple.

First in your jquery change this
$("#showBox").hide();

to this:
$("#showBox").show();

Then don’t forget in your HTML change ‘Open’ to close:
Change this:
<a href="#" id="btn-slide" title="Open">Open</a>

To This:
<a href="#" id="btn-slide" title="Close">Close</a>
tony October 12, 2011 at 8:16 pm

Like this example – is there a way to have the page scroll as the div expands, so the content doesn’t get hidden below the fold? In the setup I’m playing with, the box is just above the fold and i’m looking to scroll the page when the content is revealed to show to entire div
Lowestofthekeys January 16, 2012 at 6:55 pm

I just had a quick question. I was attempting to use the coding to create a show hide text box that toggled with an image instead of text. It seems to be working in chrome, but not internet explorer. I am just wondering if I missed something
Lowestofthekeys January 16, 2012 at 6:56 pm

Also, awesome functionality on this, I like the simplified code and everything works!
Rex February 15, 2012 at 4:45 pm

Cool stuff, but jquery is really a big deal. But thanks to new generation CSS3 which made our life easier. Nice tutorial. I just found one more share which toggles the div using only CSS3. STRICTLY NO JAVASCRIPT

http://webstutorial.com/html5-css3-toggle-slideup-slidedown/html-5
John Stephen Jones February 15, 2012 at 9:12 pm

Hi Lowestofthekeys, could you send me a link to an example of your IE issue?

Glad you liked the tutorial
John Stephen Jones February 15, 2012 at 9:13 pm

Hi Rex – Nice CSS3 tutorial – will look into experimenting with that. JQuery is not that a big deal although you will get greater cross browser support with it for your clients right now, but slowly we are moving forward and CSS3 is so much quicker to implement.
John March 10, 2012 at 9:26 am

Hi is there a way when you click the button to show the content and hide the button when the content open..?