Spoiler JS-html

On peut cacher une partie d'article et le dévoiler sur demande,
en cliquant sur ce bouton (ci-dessous).
Un 1er clic on affiche la partie cachée de l'article.
puis un second clic, pour le cacher ....
Ou en passant le curseur sur le lien ' Survolez-moi! ' ...

----- 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;
}