Blue Boxes and Hidden Information

by

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”>
div.details{
border:0px solid;
background-color:#E1EDEC;
}
a.details{
background-color: #E1EDEC;
color:#0066FF;
text-decoration:none;
}
div.innerdetails{
background-color: #E1EDEC;
display: none;
}
</style>

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) {
$(“#”+divId).toggle();
}
// ]]></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=’http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.4.2‘></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.

</div></div>

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:

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

Blah Blah I’m amazing.

</div></div>

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:

Leave a Comment

{ 5 comments… read them below or add one }

Jim Bessey

Thank you, Amit.
You are indeed amazing.
I love this effect, for clarity and brevity — exactly as you use it.
Am copying your instructions now to try in a sample post. If I end up using the code in a real post, successfully, I’ll give you full credit and gratitude.
Along the same lines, what is your opinion of the embedded “click to Tweet this” (used for a single sentence within a post) that I’m seeing in other A-Listers’ posts? I’m on the fence for now. What say you of it?
Thanks again,
~Jim

Reply

Amit Amin

No problem, and thanks! Again, if you get stuck, I’m happy to help.

I’ve seen a few posts with “click to Tweet” used with mundane sentences, which I’d never do, but it’s great when used with great material.

I’d be enthusiastically incorporating it into my posts, except 80% of my traffic comes from search engines.

Reply

Lori Lynn Smith

Hi Amit

Cool thanks!

You could add the css to your style .css
I am guessing you could also add your javascript to you header hooks? have you tried this?

totally understand you frustration between the html and visual editor, it is not your theme, it is wordpress, it is trying to be helpful and stripe away all the “extra” code. definitely gets annoying.

Reply

Amit Amin

No problem!

Actually that’s what I do now – I add the css to my custom .css, and my javascript to my header hooks. But I wasn’t sure how custom .css and header hooks work with non-thesis themes, so I gave instructions I think should work with all wordpress installations.

Reply

Jane Robinson - Art Epicurean

You make it sound so easy. I don’t know to edit html…yet….but you make convince me with your articles. Thanks.

Reply