Create a Collapsible element using JavaScript

Sometimes hiding or showing some content to the user is to be decided. For instance, you are writing down the review of a movie and you don’t want the user to know the suspense by default. So, you can tell the user that this is a “Spoiler Alert”. If the user wants to read it, he or she can read it otherwise it will remain hidden to the user!

Making such a thing is pretty easy but requires you to decide if you want the user to see the data by default or it must remain hidden by default. It totally depends on your application of this tip. Well, let’s get started writing down some basic HTML and CSS first. If you already don’t use Notepad++ for writing your codes, I recommend you to go ahead and get that at first. Read more about Notepad++ in my earlier article.

HTML and CSS for Collapsible Element

Start by creating a new document for this tutorial. Let’s get started.

1. In the body tag of the webpage, create a new div tag element and give it the id as “expand“.

   <div id="expand">
   <!-- Content Goes here -->
   </div>
   

2. Inside this div tag, place all the code that you want the user to see or not see.
3. Now, in the head tag of the page, create a new style for the id expand by providing the following text in the head tag of the webpage.

   <style>
   div#expand{
   display:block;
   }
   </style>
   

4. Now, in the body of the webpage, create a new anchor tag (a tag) which will control the element to be displayed or to be hidden. In this element, give the href value as “javascript:;” and the onclick value as “show()“.

   <a href="javascript:;" onclick=show()>Show/Hide Text</a>
   

5. Well, we are now done with the HTML part of the page.
   

Let’s now add the JavaScript code for this webpage to work properly.

JavaScript Code for Collapsible Element

The JavaScript code is pretty easy and clean to understand as well.

1. In the head tag of the webpage, create  a script tag and create a new function called show in there.

   <script>
   function show()
   {
   //Function content goes here
   }
   </script>
   

2. Inside this function, we need to check if the div element is currently hidden or shown. Do that by using an if statement and this line of code.

   if(document.getElementById('expand').style.display == 'none')
   

3. Now, perform the action that you want and add the other code to the else part of the statement.

   document.getElementById('expand').style.display = 'block';
   else
   document.getElementById('expand').style.display = 'none';
   

4. Well, that’s all. Just save the page and open in your browser to have a look at your newly created JavaScript effect.
   

This is how your HTML page should look like right now.

And that’s all for this tutorial. I hope this tutorial helped you create something useful for yourself or your website. If you want, you can download the entire source code here.

Download Source Code

Keep subscribed to Slash Coding via RSS Feeds, Facebook, or Twitter. See you around! 😉