Spoiler CSS Only With Details And Summary

Untuk membuat blog memiliki loading yang ringan dan user friendly, diusahakan membuat blog menggunakan CSS dan HTML saja, namun dilarang untuk menggunakan CSS inline.

Untuk itu kini saya membuat sebuah elemen web yang masih banyak digunakan yaitu spoiler. Agar bisa digunakan dan tidak memberatkan loading blog, maka spoiler dibuat hanya menggunakan CSS dengan tag details dan summary, spoiler CSS only with details and summary.

Ide ini saya dapat dari postingan terdahulu tentang membuat vertical menu dengan details dan summary.

Namun sangat disayangkan, tag details dan summary ternyata tidak diperbolehkan di AMP HTML.

Baiklah, spoiler untuk blog AMP HTML akan kita buat setelah ini dan hanya menggunakan CSS juga.

Untuk demo spoiler CSS only with details and summary bisa dicoba di embed JSFiddle di bawah ini.


Untuk menggunakan spoiler seperti itu, silahkan simpan CSS di bawah ini di CSS style blog Anda.


.spoiler details > summary{
  cursor: pointer;
  background: #26272a;
  margin: 0;
  padding:4px 18px 4px 8px;
  outline: none;
  border-radius: 3px;
  color: #efefef;
  transition: all .3s ease-in-out;
  display: inline;
  font-size: 12px;
  line-height:1;
  font-family: arial, san-serif;
}
.spoiler details > summary:hover {
  background: #424346;
}
.spoiler details > div {
  background: #efefef;
  padding:6px 10px;
  margin: 5px 0 0;
  border: 1px solid #ddd;
  -webkit-animation:slide-down .3s ease-out;
  -moz-animation:slide-down .3s ease-out;
}
.spoiler details > div > p {
  margin: 0;
}
.spoiler details > div > p img{
  margin: 4px 0 0;
  max-width: 100%;
  height: auto;
}
.spoiler .spoiler_title {
  display: inline;
  float: left;
  margin: 4px 10px 0 0;
  padding: 4px 0;
  font-size: 16px;
  line-height:1;
}
.spoiler {
  overflow: hidden;
}
@-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-100%)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes slide-down{0%{opacity:0;-moz-transform:translateY(-100%)}
100%{opacity:1;-moz-transform:translateY(0)}
}
.spoiler details:not([open]) ~ .block {
  display: block;
  background: #efefef;
  padding: 6px;
  border: 1px solid #ddd;
  margin: 5px 0 0;
}
.spoiler details[open] ~ .block {
  display: none;
}

Kemudian gunakan HTML di bawah ini ketika akan menyisipkan sploiler di dalam postingan (pada mode HTML).


<div class="spoiler">
<span class="spoiler_title">Spoiler: </span>
<details>
  <summary>Hint</summary>
  <div>
  <p>Tulis konten di sini......</p>
  <br />
  <p>Bisa juga simpan gambar di sini......</p>
  </div>
</details>
<div class="block"></div>
</div>


Reactions:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser

Hot on this week: