Among the many capabilities for jQuery, the one I find I use the most is using jQuery to run a blind box (a.k.a an Expanding-collapsing box). In case you are unfamiliar with blindboxes, below is an example; simply click on the pink box to collapse and expand the content within the box.

In order to create the blind box above you would need to add the code below to your page (though hopefully the content will be changing )

But more likely than not you want to understand how to create this effect for yourself, so let’s go through 5 steps for how to put together the blindbox effect.

Step 1

Before we can start coding this jQuery blindbox (or any jQuery script) we need to call in the jQuery library which contains all the core code that allows all the scripting goodness. You can do this by either saving a copy to your web server and calling it from there, or calling it from a CDN (Content Delivery Network) like google.

The latter option is the one I use, one reason being that so many sites already link to jQuery on google’s CDN that there is a fair chance it will be cached on your users system, making the site load all the faster . To get jQuery with this method, we insert the following code in the head tags.

Step 2

Next, below our google CDN jquery call, we need to add another script tag with type=”text/javascript”. Within this set of script tags is where we will be placing our jQuery code for the blindbox.

This code can start in one of 2 ways, both work the same, one is just more of a shorthand; if you want to look like you totally know what your doing use the shorthand .

The first option is to write the following:

The shorthand version of this is to write:

Honestly, for a while I was using the former just because it is what I used starting out, so I remembered it more easily, but now I am trying to use the $(function(){…}); form.

Step 3

All right, the house keeping (easily made into a snippet ) part is done and here’s where things get fun!

First we state which css selector we want jQuery to target (here it is the .blindbox selector). The semantics for writing this part of the jQuery expresion are: $(‘selector name’). where (‘selector name’) should be written as (‘#id’) for css ids, (‘.class’) for css classes, (‘tag’) for html tags like <p> and <li>, and finally (variable) for javascript variables (notice the lack of quotes around the variable).

Second we state how/when we want jQuery to operate on the selector we chose (here it is the .click() function). The .click() function triggers whenever the targeted selector is clicked, and will execute whatever function is within the parenthesis. Bringing us to…

Step 4

Within the function(e){} brackets we define what actions will be executed when our selector (.blindbox) is operated on (.click()).

It might look complex to you, but what this new code line is saying is “For whatever element was operated on (in our case clicked on) find any of its descendent elements that have a class of “bb-content”. On these children, if they are visible hide them and if they are hidden, make them visible.” Perhaps you are able to deduce from this what each part of the code does, but in case you are a normal human let’s break down each piece:

• $(this) – Think of $this is as an undefined placeholder variable. We use it so that we don’t have to hard code a .click function for each element that we want to make a blind box. Not a big deal if we just have one, but if we had 100 blind boxes, coding one function using $this, instead of 100 using specified id or class selectors is an obvious time and file size savings. Essentially we are saying we want $(this) to represent whatever instance was clicked of an element with the class “blind-box”.
• .children(‘.bb-content’) – We use the .children() jQuery function to take whatever element we are targeting with $(this) and find all the immediate descendants of that element. For example in a unordered list like <ul> <li><span>Item 1</span</li><li> <span>Item 1</span</li> </ul> the immediate descendants of <ul> are the <li>s not the <span>s, while the immediate descendants of the <li>s are the <span>s. Then having the ‘.bb-content’ within the parenthesis of the .children() function allows us to only look for descendants that have a class=”bb-content”.
• .slideToggle(450) – Last we use jQuery’s .slideToggle() function to animate element(s) we have targeted based on the $(this) and .children(…) statements. The reason for using slideToggle as opposed to toggle is just because the former animates more like one would expect a blindbox to animate, while the latter essentially shrinks and grows the targeted element. The 450 is simply the time in milliseconds we want the animation to last (other options would be to replace 450 with “slow”, “normal”, or “fast”).

Step 5

The last step is simply writing as many HTML blindboxes as you need for your page. The basic structure of the HTML should look like the following:

Because we used classes and not ids for the blindbox code we can reuse it throughout the page for as many blindboxes as are required. That’s it. Great work .