Spoiler JS-html

----- Les codes -----:

<!---------------Spoiler-code-html------------------------------------------->
<div class="spoiler"><br />
<input onclick="showSpoiler(this);" type="button" value="Voir-Cacher" />
<div class="inner" style="display: none; margin: 5px 20px;
border: 2px solid yellow; background-color: rgba(0, 0, 0, 0.4);
padding: 10px; border-radius: 10px;"><br /><a>Voici un spoiler !</a>
<p>Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper. Aenean ultricies mi vitae
est. Mauris placerat eleifend leo.</p>
</div>
</div>
<!-----------------Script js------------------------------------------------->
<script type="text/javascript">// <![CDATA[
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
// ]]></script>

<!------------------Code CSS------------------------------------------------>

/*-----spoiler en CSS-----*/
#layer1 {       
    visibility : visible;       
    position : relative; 
} 

#layer1 a:active { 
    color:red;
}
    
#layer2 { 
    width:300px;
    border:1px solid yellowgreen;
    border-radius:10px;
    box-shadow:6px 6px 10px black;
    padding:20px;
    visibility : hidden;       
    position : absolute;  
    
} 

#layer2:hover {
    background-color:red;
    color:yellow;
}