glow effect css

CSS

.neon {
  -webkit-animation: glow 1.2s ease-in-out infinite alternate;
  -moz-animation: glow 1.2s ease-in-out infinite alternate;
  animation: glow 1.2s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    -webkit-filter: drop-shadow(4px 4px 5px rgba(161,11,150,0.2));
    filter: drop-shadow(4px 4px 5px rgba(161,11,150,0.2));
  }
  to {
    -webkit-filter: drop-shadow(4px 4px 5px rgba(161,11,150,1)); 
    filter: drop-shadow(4px 4px 5px rgba(161,11,150,1)); 
  }
}
    
@-moz-keyframes glow {
  from {
    -moz-filter: drop-shadow(4px 4px 5px rgba(161,11,150,0.2));
    filter: drop-shadow(4px 4px 5px rgba(161,11,150,0.2));
  }
  to {
    -moz-filter: drop-shadow(4px 4px 5px rgba(161,11,150,1));
    filter: drop-shadow(4px 4px 5px rgba(161,11,150,1));
  }
}

HTML

<img class="neon" src="http://greckzero.com/sources/key.png" alt="Key" />
<p class="neon">Glow Effect Text</p>

Demo

spoiler with javascript

JavaScript

function button(spnum){
  var button = document.getElementById('spoiler_' + spnum);
  var content = document.getElementById('content_' + spnum);
    if(content.className == 'hidden'){
      content.className = "visible";}
    else if(content.className == 'visible'){
      content.className = "hidden";}
}

CSS

.hidden {
display: none;
}
.visible {
display: block;
margin: 5px;
}
.spoiler-btn {
padding:4px;
}

HTML

<button id="spoiler_1" class="spoiler-btn" onclick="button(1)">First Spoiler</button>
<div id="content_1" class="hidden">
  First spoiler content
</div>
</br>
<button id="spoiler_2" class="spoiler-btn" onclick="button(2)">Second Spoiler</button>
<div id="content_2" class="hidden">
  Second spoiler content
</div>
<br>          
<button id="spoiler_3" class="spoiler-btn" onclick="button(3)">Third Spoiler</button>
<div id="content_3" class="hidden">
  Third spoiler content
</div>

Demo