How to make a spoiler box with CSS without Javascript.

Spoiler box is a box that functions to hide content and only appear when the user clicks on button. Generally spoiler boxes appear in an open / close style, some people call it show / hide.
Most made using Javascript or jQuery because it's easier. But you can make a spoiler box open and close on a blog using only CSS only.
Why do I have to use the CSS version? Yes because of using Javascript minimal on the blog is good. Make loading faster. This while explaining that the onclick event is as simple as possible done with CSS.

1. CSS

The first thing to do in making a spoiler box (show / hide) Pure CSS is of course adding CSS code first.

Paste the following code ABOVE   ]]></b:skin>  or  </style>

/* Spoiler Box Pure CSS by IGNIEL.COM */
.ignielSpoiler {
    display:block; margin:10px 0px; border:1px solid #3498db; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.ignielSpoiler .tombol {
    background:#3498db; /* Warna tombol */
    color:#fff; /* Warna tulisan di tombol */
    display:inline-block; cursor:pointer; font:normal 600 14px Tahoma,sans-serif; padding:0px; border:none; outline:none; line-height:20px; border-radius:3px; -moz-border-radius:3px;
}
.ignielSpoiler .tombol:focus {
    pointer-events:none;
}
.ignielSpoiler .tombol:before {
    content:'Lihat Spoiler'; /* Tulisan untuk membuka tombol */
    display:inline-block; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.ignielSpoiler .tombol:focus::before {
    content:'Tutup Spoiler'; /* Tulisan untuk menutup tombol */
    background:#cc0000; /* Warna tombol ketika spoiler terbuka */
}
.ignielSpoiler .isi {
    background:#e4e4e4; /* Warna background isi spoiler */
    pointer-events:auto; visibility:hidden; opacity:0; height:0px; transition:all .5s ease;
}
.ignielSpoiler .tombol:focus + .isi {
    visibility:visible; opacity:1; height:auto; margin:10px 0px 5px; padding:10px 15px; transition:all .5s ease;
}

2. The HTML

This HTML code functions to call the spoiler box. Use the following code in the post whenever you want using spoilers.

<div class="ignielSpoiler">
    <div class="tombol" tabindex="0"></div>
    <div class="isi">
        <!-- Content Spoiler -->
        Write the content that you want to hide here.
    </div>
</div>

RESULT OF ORIGINAL DESIGN

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Second Method

Here I am going to show you a second method to put Spoiler Box in your Blogger Posts. This method does not need changes in the Blogger Template.
Simply Copy and paste the following code in the place of your post where you want the Spoiler to be displayed.

 <style>
/* Spoiler Box Pure CSS by IGNIEL.COM */
.ignielSpoiler {
    display:block; margin:10px 0px; border:1px solid #75539e; padding:7px 10px; border-radius:3px; -moz-border-radius:3px; 
}
.ignielSpoiler .tombol {
    background:#8968b0; /* Warna tombol */
    color:#fff; /* Warna tulisan di tombol */
    display:inline-block; cursor:pointer; font:normal 600 14px Tahoma,sans-serif; padding:0px; border:none; outline:none; line-height:20px; border-radius:3px; -moz-border-radius:3px;F
}
.ignielSpoiler .tombol:focus {
    pointer-events:none;
}
.ignielSpoiler .tombol:before {
    content:'Open Spoiler'; /* Tulisan untuk membuka tombol */
    display:inline-block; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.ignielSpoiler .tombol:focus::before {
    content:'Close Spoiler'; /* Tulisan untuk menutup tombol */
    background:#8968b0; /* Warna tombol ketika spoiler terbuka */
}
.ignielSpoiler .isi {
    background:#e4dced; /* Warna background isi spoiler */
    pointer-events:auto; visibility:hidden; opacity:0; height:0px; transition:all .5s ease;
}
.ignielSpoiler .tombol:focus + .isi {
    visibility:visible; opacity:1; height:auto; margin:10px 0px 5px; padding:10px 15px; transition:all .5s ease;
}
</style>
<div class="ignielSpoiler">
    <div class="tombol" tabindex="0"></div>
    <div class="isi">
        <!-- Isi Spoiler -->
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

1. After pasting the code you can edit the colors of the Spoiler to match the design colors of your Blog.

RESULTS OF MY EDITED VERSION