How can I use collapsible content in blogger posts

Collapsible content in blogger posts through HTML and CSS is very easy work. Just like programmers, bloggers right content on their block posts with some usage of HTML and CSS. Today I am going to show you how we can use collapsible content in blogger posts using HTML, CSS, and JavaScript. 

What is collapsible content in websites and bloggers? 

Collapsible content is also known as Accordion is the content structure. They used to show and height large amounts of content or block post. Accordion or collapsible content is very useful in different manners. They can be used to create Q/A, show a large amount of content or articles parts and they can be used for the table of content structure creation. 

Along with these useful benefits, it is useful to clearly define each part of the article or content in different portions. With the help of collapsible content, users can get clear information from long and complicated articles.

How we can add collapsible content or Accordion in the blog post? 

To add collapsible content or Accordion in the blog post you need Accordion with CSS and JavaScript. If you are a programmer then you can do this work very easily. But if you are a blogger then it will be very difficult. 

For this reason, you don't need to write code.W3schools is one of the best websites to learn HTML and CSS. W3schools is one of the best websites for beginners. Here you can find every example with details. You can understand these examples with live tests and trials.

You need to do something in follow these steps. 

1. Open the W3Schools website.
2. Once you open W3Schools enter Collapsible/Accordion in the search bar and click search. 
3. You will find the first website which will tell you how to use Collapsible/Accordion in HTML and CSS. 
   
   
   
4. In this website link you will find out different kinds of examples with the trial test. 
5. Open any try test by clicking on the try it yourself button in the example. 
6. After clicking try it yourself a button and another website link will be opened with the live test of collapsible content. 
7. Now the amazing thing is you can use this code directly in your blog post blogger.

The next step is to use the Collapsible/Accordion w3Schools example in the blogger blogpost

1. Open your blogger post where you want to use collapsible content 
2. Now open your blogger post editor into HTML view from the left side. 
3. Now you have to use Accordion w3Schools code into this HTML Editor 
4. First you have to copy the style code from the style open and close tags. And then put it into the editor. 
5. After this you have to add accordion div tags from open to end div tag structure. 
6. The last thing is javaScript now you have to copy javascript code from the W3Schools page with the opening <script> tag and copy at the end of </script>
7. You can use these 3 codes in any hierarchy such as paste style code first, then JavaScript code second and at the end, you can use a collapsible content div structure. 
8. Now save the blog post and take a look at your blog after publishing. You can see and test the collapsible content structure after publishing. Because if you draught your block post you will not be able to use and see collapsible content. It will simply disable draft preview in blogger posts. 

How to edit Collapsible/Accordion from w3schools in blogger post 

Now it's the final part to edit the Collapsible/Accordion structure in your blogger post. In the dive structure, you will clearly see that each section started from a button and panel. Button text can be used as a label and paragraph sections in the panel can be used as an article. 

Conclusion 

I hope this article will help you to add collapsible content structure in blogger posts. If you face any problem then you can come and down below.