How To Add Expandable Section in your Post on Blogger

Show All your content here Let's start This tutorial requires you to work with codes, here work means just...

Show

All your content here

Let's start

This tutorial requires you to work with codes, here work means just copying-pasting and editing some parts of the code. So it will be easier for you to work if you open a plain text editor like Notepad.

Including the jQuery Library

This step is optional, you might not need to perform this step if your template already has a jQuery library included. If you are using a custom designed template, as your web dev. if they've already added it. If not you may continue with the steps

1. Go to your Blogger Dashboard -> Template -> Edit HTML
2. When inside the code box press CTRL+F to open a search box
3. Search for </head> in the template
4. Once you find it in the template, paste the following code immediately above </head>
   
   ?

   1	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

That is how you add jQuery to your blog.
Always remember to add the jQuery script code above any script (including the one I am going to provide for this widget) in the template depends on jQuery.

JavaScript/jQuery Code

The first thing you will add in the template to make our expandable section work is the code that handles it hiding and showing. It's a small jQuery dependent JavaScript code. Following is the code you need :

?

1 2 3 4 5 6 7

<script type='text/javascript'> $(document).ready(function(){   $(".sh-section-btn").on("click",function(){     $(this).parent().children(".h-section-cont").slideToggle(200);   }); }); </script>

The code above simply tells the browser to show hidden content if the "show" button is clicked, and if the content box is already visible it simply hides.

To apply this code go to the Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F to find </body> and paste the JavaScript code immediately above/before it and save.

Adding the CSS

The event handling part is done. Now let's style our expendable box so that it looks good and the reader notices it.  Here's the CSS that styles the complete box. 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

/* Expandable Box CSS */ .hidden-section-container {   background-color:rgba(187, 187, 187, 0.93);   box-shadow:0 2px 10px rgba(0,0,0,0.2); } .sh-section-btn {   font-size:18px;   color:#fff;   text-shadow:1px 1px 0px rgba(0,0,0,0.2);   padding:5px 10px;   cursor:pointer; } .h-section-cont {  padding:10px 10px;  background-color:#eee;  display:none; }

If you aren't sure how to add this CSS to your Blog, check my tutorial on adding CSS in blogger.

HTML for the box

After we've got the two main things for this box we can now actually use it in our blog posts. Using it is simple. The HTML for box may contain your text or any other content you want inside it. But before we add the content let's see what's the basic HTML for this box.

?

1 2 3 4 5 6 7 8 9 10

<div class='hidden-section-container'>   <div class='sh-section-btn'><span>Show</span></div>   <div class='h-section-cont shw-box'>     <!-- All your text/html below this -->            <p>All your content here</p>           <!-- All your text/html above this -->   </div> </div>

You don't need to make much changes to this. All you need to change is the title and the content. Let's see how you will do it :

1. Title Text - This is the text that will appear as the title of that expandable box. See the second line of the code. Change the text "Show" to anything you want as the title.
2. Content - After the line 4 you can add anything possible with HTML inside the hidden box. Add text, images, links etc. using its HTML markup.

Once your HTML for the expandable box is ready you are all set to put it in your post body. But you can't simply paste HTML code in your post editor. In order to prevent the HTML from being shown just as plain text you will first need to switch to the HTML mode in the post editor. 

Open your Post Editor, now select the HTML tab next to the 'Compose' tab to switch to HTML mode. Now you can paste your code anywhere you want the box to appear.

This is how simple it is to get such cool features in Blogger. If you face any difficulty while implementing this widget feel free to comment here or email me for help.