, , ,

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. 


CSS Spoiler Only With Label And Input

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.