wonderful blogger directions for expandable posts!

Sometimes an expandable Q&A section is just what is needed in a blog post and this post from Deepak Kamat's StramaXon blog shows you how to do it!!! Just brilliant!!!

I've started it in this T-Mobile's Q&A post.

Although the tutorial is great, I find that I sometimes have to go back and figure things out a little since it's written in someone else's words, so here's the full tutorial:

Basically, you'll be doing four things:

1. Add the jQuery library
2. Add the JavaScript/jQuery code
3. Add the CSS to style the box
4. Include the script to call the all of it in a post

I. Add the jQuery library
This step may be optional; if you are using a custom designed template and it already has a jQuery library included, you won't need to do this step. If not, continue with the following steps to add this script:

1) Go to your Blogger Dashboard -> Template -> Edit HTML
2) When inside the code box press CTRL+F to open a search box and find

</head>

3) Once you find it in the template, paste the following code immediately above the head code you just found

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

II. Add the JavaScript/jQuery code
Next, you'll add a small jQuery dependent JavaScript to make the expandable section work (it handles the hiding and showing). This code 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. Remember to add the jQuery script code above any script.

Again, go to your Blogger Template (Blogger Dashboard -> Theme -> Edit HTML) and use CTRL+F to find

</body>

Paste the following JavaScript code immediately above the body code you just found and save the template.

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

III. Add the CSS to style the box
Now we have to style our expendable box so that it looks nice and the reader notices it. To add CSS to Blogger, go to Theme -> Customize - > Advanced. Scroll down to "Add CSS" and paste the followng code in the 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;
}

Click "Apply to Blog".

IV. Create a blog post with your expandable box For each blog post in which you want to use your expandable box, copy and paste the following html code:

1 2 3 4 5 6 7 8 9 10

<div class='hidden-section-container'>   <div class='sh-section-btn'><span> ((YOUR BOX TITLE GOES HERE)) </span></div>   <div class='h-section-cont shw-box'>     <!-- All your text/html below this -->            <p> ((YOUR BOX ANSWER GOES HERE; USE HTML TO STYLE IT)) </p>           <!-- All your text/html above this -->   </div> </div>

In the code above, change the title of your box and the answer by doing the following:

1. Your Box Title: In the second line of code, delete "((YOUR BOX TITLE GOES HERE))" and change it to your title.


2. Your Box Answer: You can start your answer in line 5. You may add anything possible with HTML inside the hidden box. Add text, images, links etc. using its HTML markup.

Remember that 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 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.