Use javascript to create collapsible content in your WordPress site

Javascript, also known as ECMAscript, is a browser (client) side scripting language, which means that using this code you alter the behavior of the browser. The browser reads the code and does actions which are beyond HTML and CSS capabilities. If you have javascript disabled in your browser then you won’t see the demo at the end of this tutorial.

HTML, CSS, PHP, ASP and other languages are server side scripting languages which tell the server (as opposite to the browser) how they should send the page over to your browser. Javascript is loaded then in browser and extra actions happen because of the rendering the browser does.

Since I got to work on a few small Elance projects I got to learn a bit about the usage of codes, although I’m not javascript literate at all. Still, here comes the magic: with a little care you can use javascript codes, especially JQuery codes, to enrich the content of your site or blog. Remember JQuery and javascript are not different languages, JQuery is only a small part of javascript, it is a library of functions built on top of javascript.

Javascript code for creating collapsible content in your site

Javascript is all about doing a certain action on a given element from a page. In order to have a working collapsible content that hides when you click on it’s title you need to use three types of code:

  1. javascript code – this is very important as it tells what content to hide
  2. html code – this code will be the subject of alteration
  3. css code – give it some nice touch with styling

Below you can see the javascript code I used to do this. Put this code in header.php, right before the closing head tag </head>:
[html]
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".collapsediv").hide();
//toggle the component with class collapsediv
jQuery(".collapseh").click(function()
{
$(this).toggleClass("selected");
jQuery(this).next(".collapsediv").slideToggle(800);
});
});
</script>
[/html]

The code above allows you to identify all elements with class=”collapsediv” and the hide them. After that it recognizes all the elements with class=”collapseh” (the headings, or titles) and, if clicked, they will trigger the action to show the content from the next element.

Also, using the action toggleClass(“selected”) you can apply some additional styling to the heading. This way, while the content is shown you can change the appearance of the heading by putting a minus icon on it’s left side.

Notice this line: src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js” ? It tells the browser where from it showd take the file with all the functions needed to make this happen. Right now it points to version 1.7.1 of JQuery, but in the future you might want to update the link to the proper version. For this just go to here and see the updated version of the link, by looking for path.

HTML code to use in your pages or posts

The following code needs to be used besides javascript code. This HTML code needs to be inserted in the post using the HTML editor, not the visual editor.
[html]
<p class="collapseh">Heading here</p>
<div class="collapsediv">
your text here
</div>
[/html]

Notice that your heading is in a p tag and has the class=”collapseh”. If you click on that on the live demo you will be able to unhide the content. Instead of “text here” you can put whatever content: images, videos, text, music.

You can use as many combinations of this code as you need. Do not forget to close the p and div tags as it may lead to unwanted consequences.

Use CSS code to style the heading and the hidden content

Bwloe you can copy and paste the CSS code. Please modify as needed the colors, images and maybe paddings. Each blog/site uses different styling so you may have to tweak the code, but it will look okay. Here’s the code:
[css]
.collapseh {
margin: 1px;
padding: 5px 0 5px 20px;
cursor: pointer;
position: relative;
border-bottom: solid 1px #404040;
margin-bottom: 1px;
font-weight: bold;
background: #1c1c1c url(here-link-to-icon-plus) no-repeat 0 7px;
}

.selected {
background: #1c1c1c url(here-link-to-icon-minus) no-repeat 0 7px !important;
}

.collapsediv {
padding: 5px 10px;
background-color:#1c1c1c;
border-bottom: solid 1px #ccc;
border-top: solid 1px #404040;
margin-bottom: 1px;
}
[/css]

You can see there the following texts: “here-link-to-icon-plus” and “here-link-to-icon-minus”. You need to update those with the plus and minus images I will provide at the end of the tutorial. Of couse you can use your own images, background and styliong, but you will have in the zip archive a text file with these codes and the two images files.

Collapsible text – working demo and files

Please know that this code is provided as is, with no warranty whatsoever. I am not the creator of this code, I used it and modified it. If you know the original source please put the link in the comments. And here is the demo. Just click on “Heading here”:

Heading here – click here to show the text from below

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

And here is the zip archive with all the codes in it. Download here.

4 Responses to “Use javascript to create collapsible content in your WordPress site”

  1. very nice bit of code. Thanks mucho although need to have a correction on this bit of the Javascript code you have $(this).toggleClass(“sellected”); and it should read $(this).toggleClass(“selected”);
    Took me a bit of looking to find out why it wouldn’t work at first. Otherwise very nice thanks !

  2. Very helpful, I got my website looking really nice by this.

    • Thanks. I will write some more tutorials about such things. Basically, if i get to work on a project on Elance, then I might just write here the solutions too 😀