AMP-Accordion Modification Being an AMP HTML Blog Spoiler
Problem: Unfortunately for AMP HTML still has 1 deficiency that is -img not appear in spoiler unless spoilernya open first. This means that amp-img can not be stored in a div that has a display: none; style display: none; Except by using an amp-accordion .
For that, this time we will modify the amp-accordion to spoiler for AMP HTML blog so it is safer to use (can display image inside spoiler).
Demo spoiler below: (Demo only, no live)
Spoiler:
Hint
<div class=“spoiler-amp”>
<span class=“spoiler_title”>Spoiler: </span>
<amp-accordion>
<section>
<h4>Hint</h4>
<div><p>
Simpan konten atau gambar (amp-img) di sini …
</p></div>
</section>
</amp-accordion>
</div> Spoiler:
Hint
Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known, muse about!
Spoiler:
Hint
Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known, muse about!
Well if you want to try this spoiler in your AMP HTML blog, please save the CSS below in your custom-style CSS blog.
.spoiler-amp amp-accordion h4{width:62px;background:#26272a;padding:5px 0 5px 22px;outline:0;border-radius:3px;color:#efefef;font-size:12px;font-family:arial,san-serif;line-height:1;font-weight:400;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.spoiler-amp section:not([expanded]) h4:before,.spoiler-amp section[expanded] h4:before{height:0;width:0;border-style:solid;position:absolute;left:8px;content:“”}
.spoiler-amp .spoiler_title{display:inline;float:left;margin:0 10px 0 0;padding:4px 0;font-size:16px;line-height:1}
.spoiler-amp section:not([expanded]) h4:before{border-width:4px 4px 4px 7px;border-color:transparent transparent transparent #fff;top:7px}
.spoiler-amp section[expanded] h4:before{border-width:7px 4px 4px;border-color:#fff transparent transparent;top:8px}
.spoiler-amp amp-accordion div{width:100%;border:1px solid #ddd;background:#efefef;height:auto;padding:6px 10px;margin:8px 0 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
.spoiler-amp amp-accordion div p,.spoiler-amp amp-accordion div pre{margin:0;padding:0;-webkit-animation:slide-down .3s ease-out;-moz-animation:slide-down .3s ease-out}
.spoiler-amp amp-accordion div pre{background:none;color:#111;padding:4px 0;overflow:auto;max-width:100%;text-align:left;margin:0 auto;border-left:0}
.spoiler-amp amp-accordion div pre code{color:#111}
.spoiler-amp amp-accordion div p amp-img{margin:4px 0}
.spoiler-amp amp-accordion section:not([expanded]):after{content:“”;display:block;background:#efefef;padding:6px;border:1px solid #ddd;margin:8px 0 0}
@-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)}
} Then to display the spoiler in the post (in HTML mode), please use the HTML code below.
<div class=“spoiler-amp”>
<span class=“spoiler_title”>Spoiler: </span>
<amp-accordion>
<section>
<h4>Hint</h4>
<div><p>
Save content and images (amp-img) in here …
</p></div>
</section>
</amp-accordion>
</div> If you want to save the code inside the spoiler. Please use the HTML code below.
<div class=“spoiler-amp”>
<span class=“spoiler_title”>Spoiler: </span>
<amp-accordion>
<section>
<h4>Hint</h4>
<div><pre><code>
Save codes if have been parsed here…
</code></pre></div>
</section>
</amp-accordion>
</div> And make sure you have js amp-accordion installed for your blog posts page.
Related Articles
