How to Add Toggle Show / Hide For All Template

Add Toggle Show

   View Demo

Step 1: First of all Login to your Blogger Dashboard.

Step 2: In Blogger, create a post or page and insert the code shown below.

Step 3: Copy and paste the following code into Blogger's blog Post.

Step 4: Create Post/Page.

Step 5: Than Paste the following Code.

<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Read More</summary>
  <p>ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ</p>
</details>

<style>
details[class~=sp] summary{cursor:pointer;}details[class~=sp] summary::after{content:attr(data-show);}::before,::after,
  *{box-sizing:border-box;}details[class~=sp] summary{font-weight:bold;}details[class~=sp] p,details[class~=sp] summary{font-size:1rem;}details.sp[open] summary::after,details[class~=sp] summary::after,details[class~=sp] summary{padding-left:.625pc;}details[class~=sp] summary{padding-bottom:.625pc;}details[class~=sp]{border-bottom-left-radius:10px;}details.sp[open] summary::after,details[class~=sp] summary::after{background-color:#6200ea;}details[class~=sp] summary::after,details[class~=sp] summary,details.sp[open] summary::after{padding-right:.625pc;}details[class~=sp] summary{padding-top:.625pc;}details.sp[open] summary::after,details[class~=sp] summary::after{color:#fff;}details[class~=sp]{border-bottom-right-radius:.104166667in;}details[class~=sp] summary{display:flex;}details[class~=sp] summary::after,details.sp[open] summary::after{padding-bottom:.052083333in;}details.sp[open] summary::after,details[class~=sp] summary::after{padding-top:.052083333in;}details[class~=sp] summary{justify-content:space-between;}details[class~=sp] summary{align-items:center;}details.sp[open] summary::after{content:attr(data-hide);}*{-webkit-tap-highlight-color:transparent;}details[class~=sp] summary{margin-bottom:.625pc;}details[class~=sp] summary::after,details.sp[open] summary::after{border-radius:.625pc;}details[class~=sp] summary::marker{display:none;}details[class~=sp]{border-top-left-radius:10px;}details[class~=sp]{border-top-right-radius:7.5pt;}details[class~=sp] p{margin-top:7.5pt;}details[class~=sp]{box-shadow:rgba(0,0,0,.07) 0pt .052083333in .364583333in;}details[class~=sp]{padding-left:15pt;}details[class~=sp]{padding-bottom:1pc;}details[class~=sp] summary::after{margin-left:auto;}details[class~=sp]{padding-right:15pt;}details[class~=sp]{padding-top:1pc;}details[class~=sp]{position:relative;}
  
  </style>

Conclusion

I hope you have successfully added your About Us Page. If you are facing any problem in any section or you have any question then ask us in the comment box. 

Copyright ©
ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ