How to create collapsible view/hide section in Blogger

We can easily create view/hide section in our post/page in Blogger.

Step 1: Login to your Blogger account, then go to “Template” and click to “Edit HTML” button.

Step 2: Click anywhere inside the code area, then press CTRL + F keys to open Bloggers search box.

Step 3: Type the following text in search box.

</head>

Step 4: Above </head> code paste the following code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

</script>

Step 5: Now type the following text in search box:

</body>

Step 6: Above </body> code paste the following code:

<script type='text/javascript'>

$(document).ready(function(){

$(".sh-section-btn").on("click",function(){

$(this).parent().children(".h-section-cont").slideToggle(200);

});

});

</script>

Step 7: Now we have to add CSS, then go to “Template” and click to “Customize” button. Than click for “Advanced” under which you will find “Add CSS”, click on it.

Here paste the following code:

/* Expandable Box CSS */

.hidden-section-container {
 background-color:rgba(187, 187, 187, 0.93);
 box-shadow:0 2px 10px rgba(0,0,0,0.2);
}

.sh-section-btn {
 font-size:18px;
 color:#fff;
 text-shadow:1px 1px 0px rgba(0,0,0,0.2);
 padding:5px 10px;
 cursor:pointer;
}

.h-section-cont {
padding:10px 10px;
background-color:#eee;
display:none;
}

Step 8: Now use below HTML code for collapsible view/hide section:

<div class='hidden-section-container'>

<div class='sh-section-btn'><span>Show</span></div>

<div class='h-section-cont shw-box'>

<!-- All your text/html below this -->

<p>All your content here</p>

<!-- All your text/html above this -->

</div>

</div>

Above code can be used in post or in pages.

You can change content according to your need.

Replace “Show” and “All your content here” as per your need.