Blue Boxes and Hidden Information


Edit: Only read this if you’re interested in using html, jquery, and css to create magic blue boxes, otherwise, enjoy my latest post!

So you’ve seen my blue boxes. The ones where you click, and like magic, more information appears. I use them because if I wrote down everything I wanted to say, my posts would be 5,000 words long – too long, even by my standards.

You can see examples here and here.

Here is what’s going on – I enclose each piece of hidden information within html div tags. Then, I use CSS to give the div tags the display property of none. Give any tag the display property of none, and its contents will vanish. When a user clicks on the relevant link, I use a single line of jquery to toggle the display property to inline, making it appear.

Two notes before I tell you how you can do it:

1. You’ll have to use the html editor.

2. If you click back from the html editor to the visual editor, the code will disappear. I recommend trying this all out on a blank post first, and then adding to your target post at the end, once you’re near completion.

Here’s how you can do it:

1. Add the following css code to the post:

<style type=”text/css”>
border:0px solid;
background-color: #E1EDEC;
background-color: #E1EDEC;
display: none;

If you are comfortable editing your custom.css file, you can add this there. If not, just paste that in anywhere in the html editor of the post. I paste the css in at the end.

2. Add the following jquery code to your html editor:

<script type=”text/javascript”>// <![CDATA[
function toggleDiv(divId) {
// ]]></script>

Again, you can enter it anywhere, but I paste it in at the end.

3. You need to call the jquery library. Just add the following code to your html editor, again, anywhere:

<script type=’text/javascript’ src=’‘></script>

4. Now, to setup the html. Copy the below into your post.

<div class=”details”>
<a class=”details” href=”javascript:toggleDiv(‘1’);”>Are you amazing or what? (click to show)</a>
<div id=”1″ class=”innerdetails”>

Blah Blah you’re amazing.


It should look like this:

Are you amazing or what? (click to show)

Blah Blah you’re amazing.


A few notes – this may be idiosyncratic to my wordpress, but after I hit the preview button, I need to hit f5 (that is, I need to refresh the preview). Only then does the javascript start working.

What do you do if you want multiple blue boxes? Just change the number:

<a href=”javascript:toggleDiv(‘2‘);”>Am I amazing or what?</a>
<div id=”2“>

Blah Blah I’m amazing.


Notice the bold ‘2’? I changed the 1 to 2. Change it to 3 if you want a third box, and so on.

For some reason, ” and ‘ are rendering poorly on my wordpress… after you copy the html code, replace each ”, ” and ’, ′ with ” and ‘.

Also, when I said switching to the visual editor will destroy your code, I was exaggerating a bit – it should only destroy your css code.

Don’t be surprised if this doesn’t immediately work for you… it took me a few tweaks. Let me know if you have any questions.

Previous post:

Next post: