How to add Show-hide button in blogger blog post

 Sometimes you want to hide part of your post's content for several reasons, for example, your blog contains puzzles or questions where you may want to hide the answer and add a button to show it.

Here is how it looks:



To show / hide part of your blog post content just follow these steps:

1- Go to your blog post and change editor to HTML mode.

2- Past the code above the part you want to hide:

3- Change the text "Show Answer" with the text your want to appear in the button.

4- Replace the text "The content you want to hide" with the content you want to hide.

5- Save and publish tour post, you can see the button but without styling.

6- To add some styling to the button, go to theme ⇒ Edit HTML press Ctrl+F and search for this tag "/b:skin".

7- Above it past this CSS code, change the colors as you like:


 Important remark:

If there is more than one text you want to hide in the same post just change every time the word "hidden" by another word like "hidden1" or any.

If you face any problem let me know in the comments.


Post a Comment (0)
Previous Post Next Post