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:


<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:


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!

terserah Anda

Spoiler:


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. 

Subscribe to receive free email updates:

0 Response to "AMP-Accordion Modification Being an AMP HTML Blog Spoiler"

Post a Comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.