make a pure CSS show hide spoiler on the blog

This time I will share how to make a show / hide spoiler on a blogger blog with some pure css styles which are certainly simple, cool, and don’t burden the blog loading.

A spoiler is a show/hide effect that is commonly used to hide content in the form of text, images, or videos. For those who often participate in forums like Kaskus, you may already be familiar with the so-called show hide spoiler.

The way spoilers work is that when we click the spoiler button, the text, images, and videos hidden in the spoiler will automatically appear.

The function of spoilers is to hide content that may not be too important so as not to disturb the reader too much, it can also beautify or add to the aesthetic appearance of your blog posts.

Show hide spoiler in this tutorial is made only with HTML and CSS which certainly will not burden the blog.

There are 3 style choices that are certainly cool and can be chosen according to your heart. Not only that, blogger friends can also install all styles on your blog.

Here’s a preview of the 3 spoiler styles

How to Create Show Hide Spoiler Pure CSS on Blogger Blog Blog

First go to the blogger template editor.

The way to enter the template editor is by logging into the Blogger Dashboard, selecting Theme or Themes, then on my theme select the small arrow beside adjust, then select “Edit HTML”.

how to make a show hide spoiler blog pure css

Then copy and paste the following CSS code before or above ]]></b:skin>

CSS Code

Style 1


/* Show Hide Spoiler Reboza Sambirejo Style 1 */
.titleSpoiler{display:flex;align-items:center}
.spoiler input[type="checkbox"] + .titleSpoiler + .isiSpoiler{transition:visibility 0s linear 0.33s,opacity 0.33s linear;visibility:hidden;opacity:0}
.spoiler input[type="checkbox"]:checked + .titleSpoiler + .isiSpoiler{visibility:visible;opacity:1;transition-delay:0s}
.isiSpoiler{display:block;margin-top:8px;padding:8px 12px;border:1px solid rgba(0,0,0,.1);border-radius:2px;font-size:13px}
.toggle{position:relative;display:block;width:40px;height:20px;cursor:pointer;-webkit-tap-highlight-color:transparent;transform:translate3d(0,0,0);margin-right:5px}
.toggle::before{content:"";position:relative;top:3px;left:3px;width:34px;height:14px;display:block;background:#9A9999;border-radius:8px;transition:background .2s ease}
.toggle span{position:absolute;top:0;left:0;width:20px;height:20px;display:block;background:white;border-radius:10px;box-shadow:0 3px 8px rgba(154,153,153,0.5);transition:all .2s ease}
.toggle span::before{content:"";position:absolute;display:block;margin:-18px;width:56px;height:56px;background:rgba(#4F2EDC,.5);border-radius:50%;ransform:scale(0);opacity:1;pointer-events:none}
.spoiler input[type="checkbox"]:checked + .titleSpoiler .toggle::before{background:#947ADA}
.spoiler input[type="checkbox"]:checked + .titleSpoiler .toggle span{background:#4F2EDC;transform:translateX(20px);transition:all .2s cubic-bezier(.8,.4,.3,1.25),background .15s ease;box-shadow:0 3px 8px rgba(#4F2EDC,.2)}
.spoiler input[type="checkbox"]:checked + .titleSpoiler .toggle span::before{transform:scale(1);opacity:0;transition:all .4s ease}

Style 2


/* Show Hide Spoiler Reboza Sambirejo Style 2 */
.spoilerRbz p{font-size:13px;margin:1.7em 0}
.spoilerRbz{border:1px solid rgba(0,0,0,.1);border-left:0;border-right:0;padding:25px 15px;margin:30px 0;font-size:15px}
.spoilerTitle{display:flex;align-items:center;outline:0}
.spoilerTitle label{margin-left:auto;color:#fefefe;background-color:#4b7bec;border-radius:2px;padding:3px 15px;font-size:11px;font-weight:400;line-height:2.5em;cursor:pointer}
.spoilerTitle label::before{content:' Show all'}
.spoilerContent{max-height:0;overflow:hidden}
.spoilerInput:checked + .spoilerTitle label::before{content:' Hide all'}
.spoilerInput:checked ~ .spoilerContent{max-height:1000vh}

Style 3


/* Show Hide Spoiler Reboza Sambirejo Style 3 */
.spoilerRbz3{background-color:#fff;display:block;margin:10px 0;position:relative}
.spoilerRbz3 label{padding:12px 20px;width:100%;display:block;text-align:left;color:#3C454C;cursor:pointer;position:relative;z-index:2;transition:color 200ms ease-in;overflow:hidden;border:1px solid rgba(0,0,0,.1);border-left:0;border-right:0}
.spoilerRbz3 label::before{width:20px;height:10px;border-radius:50%;content:'';background-color:#5562eb;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale3d(1,1,1);transition:all 300ms cubic-bezier(0.4,0.0,0.2,1);opacity:0;z-index:-1}
.spoilerRbz3 label::after{width:32px;height:32px;content:'';border:2px solid #D1D7DC;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg width="32" height="32" viewBox='0 0 32 32' xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill="%23fff" fill-rule="nonzero"/%3E%3C/svg%3E ");background-repeat:no-repeat;background-position:2px 3px;border-radius:50%;z-index:2;position:absolute;right:30px;top:50%;transform:translateY(-50%);cursor:pointer;transition:all 200ms ease-in}
.spoilerRbz3 input:checked ~ label{color:#fff;border:0}
.spoilerRbz3 input:checked ~ label::before{transform:translate(-50%,-50%) scale3d(56,56,1);opacity:1}
.spoilerRbz3 input:checked ~ label::after{background-color:#54E0C7;border-color:#54E0C7}
.spoilerRbz3 input{width:32px;height:32px;order:1;z-index:2;position:absolute;right:30px;top:50%;transform:translateY(-50%);cursor:pointer;visibility:hidden}
.isiKonten p{font-size:13px;margin:1.7em 0;text-align:justify}
.isiKonten{display:none;padding:10px 20px;background-color:#f6f6f6}
.spoilerRbz3 input:checked ~ .isiKonten{display:block}

Save the template.

Then for how to summon or install a show hide spoiler on a blog, please when writing a post enter the HTML view first.

make a blogspot blog spoiler with several styles

Caller Code

Style 1


<div class="spoiler">
<input type="checkbox" id="cbx" class="hidden"/>
<div class="titleSpoiler">
  <label for="cbx" class="toggle"><span></span></label>    
  <span>Show additional information</span>
</div>
  <span class="isiSpoiler">
    isi kontenmu disini.
  </span>
</div>

If you want to add more than 1 spoiler to the same post, add a number after cbx. Example there are 2 spoilers, if the first spoiler uses id=”cbx” and for=”cbx”, then for the 2nd spoiler add a number after it. For example be id=”cbx1″ and for=”cbx1″.

Style 2


<div class="spoilerRbz">
  <input id="spoiler-01" class="spoilerInput hidden" type="checkbox"/>
  <div class="spoilerTitle">
    <b>Spoiler</b>
    <label for="spoiler-01"></label>
  </div>
  <div class="spoilerContent">
    <p>
isi konten disini.
    </p>
  </div>
</div>

If more than 1 spoiler in the same 1 post, replace or add numbers to the code we marked.

Style 3


<div class="spoilerRbz3">
    <input id="option1" name="option1" type="checkbox"/>
  <label for="option1"><b>Spoiler</b></label>
    <div class="isiKonten">
<p>isi konten disini.
</p>
    </div>
</div>

If more than 1 spoiler in the same 1 post, replace or add numbers to the code we marked.

Post and view

How? quite easy isn’t it?

If you are still having trouble, you can ask in the comments column.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Free Online Cooking Classes
Are you looking for resources on how to cook online that will help you in the culinary arts?
Yes, Please