Independent Opening & Closing Elements with jQuery

Using jQuery to create an opening & closing element is quite easy due to jQuery’s built in methods. However creating a set of elements on the same page that work independently to one another is a completely different matter if you aren’t too familiar with jQuery. First let’s take a look at a demo. This demo is bet viewed in a browser with CSS 3 & HTML 5 support only because the styling I’ve used requires that. The jQuery should work just fine in most, if not all, browsers.

Okay. Now that you’ve had a chance to play around with the demo let’s get straight onto how it works. First let’s start with the HTML.

The HTML

Unlike some of the other tutorials I’ve done with jQuery previously, how you create the HTML determines how your jQuery code will be written. I can give you the code for how my example works, but I can’t cover every eventuality. Hopefully by explaining all the code you’ll be able to figure out how to get any HTML layout working correctly.

My HTML looks like this:

I’ll get to how your jQuery will change dependant upon your HTML later, but for now that is the HTML I’ve used. The class toggle is the element that will be closed & opened.

The CSS

The CSS is pretty important here. It makes things look nice, but not only that it can be used to hide your elements if you want them hidden on page load. Rather than using jQuery to hide them at page load, just use this instead:

Really that is all jQuery does when you tell it to hide them. Also because CSS is loaded during the DOM being loaded your elements will never be visible, whereas jQuery will not run until the DOM is ready leaving a chance of the content being visible is the page has a slow loading time.

Really that is all the CSS that is essential. The rest is to make things look pretty. If you want to see my styling just open the demo from above & view the source code.

The jQuery

Okay. Now let’s get to the hard stuff. To be honest the code isn’t that complicated. The main thing I’ve found people have a problem with is the concept. Before we get into looking at the code I’m going to try and explain the concept behind how you make sure your code will open & close each item independent of the others. Hopefully this will help you alter the code for your needs if your HTML needs to be different.

To do this we need to use the infamous this that you may have seen used in jQuery before. this (in our case) refers to the DOM object passed by the browser upon activating a event. I know that sounds complicated, but we’ll break it down by looking at the code. First the entire thing:

As usual we’ll ignore our DOM ready. As you can see we first set up a click event on our headers. These are what we are going to use to open our elements. Now you may notice that it actually effects all of those elements, so how does it work independently? Well that’s what the code inside the function does.

You can see that the next like uses that dreaded keyword this. When used in this context this refers to the DOM element which was passed by the browser when the event was activated. In this case that was the element that was clicked by the user since we are using a click event. Now we can use that to open the correct element. This is where the code can differ based on your HTML. We know that our toggle element is the next sibling in the HTML so we are going to use next() to move one sibling across and then slide it open. If your HTML is different you will need to use jQuery’s traversal methods to find your toggle element. Remember though you cannot use methods that would result in finding all elements that match your toggle class, it must only return the next element, or you will open/shut them all.

The second part of the code is pretty much the same. However our close button is inside the element we want to shut, so it’s as simple as using parent/parents with our class as the filter and sliding it back up. Simplez.

I hope this little tutorial has helped you out. The concept behind how this works can be confusing for those first starting out with jQuery, so if you have any questions about the code, the concept or anything else please don’t hesitate to ask. Unless it’s the middle of the night here in the UK I’m always around to answer any questions you might have.

Also I want to apologise for the recent absence. A combination of work, and problems with another website I help run have left me short of time. I have a few tutorial line up for the next week though so stay tuned.

CloseElementsHideIndependentJavascriptjQueryOpenReveal