Did you ever wanted to have sections inside your post body which is optional for the reader to read or see ?
In some cases you might feel need for a section of your article to be hidden and only visible when the readers wants it to be. But in basic option we get in Blogger or any other WYSIWG editor this is not possible. But wait, it doesn't mean it can't be done.
Before you proceed to the tutorial, check this demo :
Expandable Section Demo
There's nothing special, it just a hide/show box inside which you can put content of your choice. It's not something that everyone might need for their blog posts but when you need it isn't easy to find easy-to-follow instruction on the Internet so I decided to create such a box and put up its instructions for blogger.
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
Go to your Blogger Dashboard -> Template -> Edit HTML
When inside the code box press CTRL+F to open a search box
Search for </head> in the template
Once you find it in the template, paste the following code immediately above </head>
<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 :
<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.
/* 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.
<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 :
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.
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.
In some cases you might feel need for a section of your article to be hidden and only visible when the readers wants it to be. But in basic option we get in Blogger or any other WYSIWG editor this is not possible. But wait, it doesn't mean it can't be done.
Before you proceed to the tutorial, check this demo :
Expandable Section Demo
There's nothing special, it just a hide/show box inside which you can put content of your choice. It's not something that everyone might need for their blog posts but when you need it isn't easy to find easy-to-follow instruction on the Internet so I decided to create such a box and put up its instructions for blogger.
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
Go to your Blogger Dashboard -> Template -> Edit HTML
When inside the code box press CTRL+F to open a search box
Search for </head> in the template
Once you find it in the template, paste the following code immediately above </head>
<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 :
<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.
/* 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.
<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 :
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.
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.
