How to Add Toggle Show / Hide For All Template

 Hello! Welcome to Action CodeD. 

You are looking for How to add Toggle Show / Hide For All Templatethen this post is just for you.

How to Add Toggle Show / Hide For All Template

Add Toggle Show / Hide For All Template

Step 1: Login to your Blogger Dashboard 

Step 2: Create Post/Page.

Step 3: Than Paste the following Code.
<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Read More</summary>
  <p>Tecky AaryaN</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 hide & show Toggle. If you are facing any problem in any section or you have any question then ask us in the comment box. 

Copyright: 

About the author

AaryaN Sah
Student | Developer | Blogger