Make Collapsible Content In Blogger Posts

Making a nice article for your readers is the best thing to ensure good traffic on the blog. But sometimes it takes more than writing good stuff. If you write really long articles and you are afraid if your readers will read it completely or not then you can use this cool gadget.
A little knowledge of HTML and CSS can help you make your articles really cool.

For instance, take this collapsible content gadget which will help you hide some text inside another text. It's helpful if you don't want to show details or explanation of something in your article.

Let's take an example- If you have a blog about cooking and you post cooking recipes then you can use this trick to hide some of the common details. It will only give a chance to those readers who don't know about that thing and they can click on it to find more details.

Tutes Inside- Collapsible Content in Blogger


Even if you have zero knowledge of HTML, you can make collapsible content in your post just by following these simple steps.

Steps to Make Accordion in Blogger


  • Login to your Blogger profile
  • Make a new post
  • Copy and Paste this code in HTML mode


<h2>Like This</h2>
<button class="accordion">Upper</button>
<div class="panel">
<p>This is the upper section.</p>
</div>
<button class="accordion">Middle</button>
<div class="panel">
<p>This is the middle section.</p>
</div>
<button class="accordion">Lower</button>
<div class="panel">
<p>This is the lower section.</p>
</div>


  • Now, we will add some Javascript in the same manner like we added in the previous step


<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>


  • Now, we will add some finishing with CSS. Paste this code in


Template > Customise > Advanced > Add CSS

button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
div.panel.show {
display: block !important;
}


That's all, your accordion is ready.

Editing this collapsible content or accordion is really easy. You just need to change the highlighted text with your text. Everything else will be same.

Feel free to comment if you face any issue.
Also, what are the most common issues you face while creating a content?

I like blogging as much as I like coding and designing though not more than traveling.
If I'm not here publishing stuff then you will find me researching about SEO and marketing.
Love to meet new people and try to help every person.
Find me interesting or have any issue?
Shoot a message and I'll be with you.

2 comments:

  1. Hi Rishabh,I would like to know how to change the color of the page title(page gadgets) to different color when selected in a blog.Thanks

    ReplyDelete
    Replies
    1. That you can do in 'Template Designer'. Navigate to 'Themes' and then click on 'Customize' to open template designer.
      All the color settings can be changed from there. :)

      Delete

Don't forget to check 'Notify me' box to get notification of reply.