CSS Spoiler Only With Label And Input

unfortunately the details and summary tags are not allowed in AMP HTML. So the CSS spoiler only with details and summary can only be used for HTML5 templates only. 



For CSS only spoilers to be used in HTML5 and AMP HTML then we need another way to create them. 


Still remember with my post about fixed slide Blogger popular posts AMP HTML ? There I used the label label and input for the close widget button. 

From there I can idea to make CSS spoiler only with label and input . The Demo can be tried in amp-iframe Codepen.io below. How cool is not it? If you want to try it on your blog, please follow the steps below. 

Please save the CSS code below in your blog’s CSS style . 

.spoiler .spoiler_title { 
display: inline; 
float: left; 
margin: 3px 10px 0 0; 
padding: 4px 0; 
font-size: 16px; 
line-height: 1; 

.spoiler label { 
cursor: pointer; 
background: #26272a; 
margin: 0; 
padding: 4px 18px 4px 22px; 
outline: none; 
border-radius: 3px; 
color: #efefef; 
transition: all .3s ease-in-out; 
display: inline; 
font-size: 12px; 
font-family: arial, san-serif; 
line-height: 1; 
position: relative; 

.spoiler input[type=checkbox] ~ label:before { 
content: ""; 
height: 0; 
width: 0; 
border-width: 4px 4px 4px 7px; 
border-style: solid; 
border-color: transparent transparent transparent #fff; 
position: absolute; 
top: 7px; 
left: 8px; 

.spoiler input[type=checkbox]:checked ~ label:before { 
content: ""; 
height: 0; 
width: 0; 
border-width: 7px 4px 4px 4px; 
border-style: solid; 
border-color: #fff transparent transparent transparent; 
position: absolute; 
top: 8px; 
left: 8px; 

.spoiler input { 
position: absolute; 
left: -999em; 
opacity: 0; 

.spoiler .content_box { 
width: 100%; 
border: 1px solid #ddd; 
background: #efefef; 
height: auto; 
padding: 6px 10px; 
margin: 8px 0 0; 
overflow: hidden; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 

.spoiler .content_box .content { 
display: none; 

.spoiler .content p { 
padding: 0; 
margin: 0 

.spoiler .content p img { 
margin: 4px 0 0; 
max-width: 100%; 
height: auto; 

.spoiler input[type=checkbox]:checked ~ .content_box .content { 
display: block; 
-webkit-animation: slide-down .3s ease-out; 
-moz-animation: slide-down .3s ease-out; 

@-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 please use the HTML code below each will insert a spoiler inside the post (in HTML mode). 

<div class="spoiler">  
<span class="spoiler_title">Spoiler:
</span> 
<input type="checkbox" id="item-1"> 
<label for="item-1">Hint
</label> 
<div class="content_box">   
<div class="content">     
<p>Save content here.....
</p>     
<br/>     
<p>Or you can save images here......
</p>   
</div> 
</div>
</div>

Note the item-1 code in the input and label tags must be the same. If you want to use more than 1 spoiler in the post, then change item-1 to item-2 , item-3 , and so on for second spoiler, third spoiler, and so on. 

And keep in mind! It turns out that in AMP HTML can not save the amp-img inside the spoiler, unless the spoiler opens first. 

Article By https://web-manajemen.blogspot.com

Comments

  1. Anonymous

    You aϲtually make it аppear so easy ɑlong with үour presentation but
    I in finding tһіs topic to Ƅe really something wһich Ι think I might
    never understand. It seems too complex аnd vеry extensive foг me.
    Ι am looking forward in yоur subsequent рut up,
    I'll attempt tօ ցеt the hold of it!

  2. Anonymous

    Wonderful blog! І found it whilе surfing around on Yahoo News.
    Do you have any suggestions on hoѡ to ցet listed
    in Yahoo News? I'vе been trying for a while bᥙt I never sееm to get theге!
    Mɑny thanks

  3. Anonymous

    Howdy would you mind letting me know which hosting company you're working with?
    I've loaded your blog in 3 different web browsers and I musst say this blog loads a lot faster then most.
    Can you recommend a good web hosting provider at a reasonable
    price? Thanks a lot, I appreciate it!

  4. Anonymous

    I am sure this piece of writing has touched all the internet users, its really really good post on building up new blog.

  5. Anonymous

    Your method of describing the whole thing in this post is in fact good, every one be capable of simply be aware of it, Thanks a lot.

  6. Anonymous

    I wanted to thank you for this good read!!
    I definitely loved every little bit of it. I have got you bookmarked to look at new
    things you post…

  7. Anonymous

    I am realⅼy thankful tߋ the owner of thіs website who has shared thiis fantastic post aat ɑt tһis time.

  8. Anonymous

    You made some decent points there. I checkedd on the web to find out more about the issue and found most
    individuals will go along with your views on this website.

  9. Anonymous

    I don't even know how I ended up here, but I thought
    this post was great. I do not know who you are but certainly you're going to a famous blogger if
    youu aren't already 😉 Cheers!

  10. Anonymous

    Appreciating the time and effort you put into your site and in depth information you offer.
    It's awesome to come across a blog every once in a while that isn't the same unwanted rehashed information. Wonderful read!
    I've saved your site and I'm including your RSS
    feeds to my Google account.

  11. Anonymous

    Whats up very nice web site!! Guy .. Excellent ..
    Amazing .. I'll bookmark your blog and take the feeds also?
    I am satisfied to search out so many useful info here within the publish, we want
    develop more techniques on this regard, thanks for sharing.
    . . . . .

Leave a Reply

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