How to add two or more spoiler button in my blog

Question: I have a spoiler code that works well in my Blogspot blog. But when I place the same code two times in my blog (like spoiler 1, and spoiler 2), spoiler 1 works well, but spoiler 2 does not open. Why? How do I fix it? Please help. I do not know programming.

Here is code of spoiler that I am using:

enter <div id="spoiler" style="display:none"> 
HIDDEN CONTENT HERE
</div> 
<a display="initial" 
   id="button" 
   title="Click to show/hide content" 
   type="button" 
   onclick="if(document.getElementById('spoiler')                     
                       .style.display=='none') {
               document.getElementById('spoiler')                                    
                       .style.display=''
            }else{
               document.getElementById('spoiler')               
                       .style.display='none'
            }">
   Show hidden content
</a>

Answer

Works for me when I rename the ID

enter <div id="spoiler" style="display:none"> 
HIDDEN CONTENT HERE
</div> 
<a display="initial" 
   id="button" 
   title="Click to show/hide content" 
   type="button" 
   onclick="if(document.getElementById('spoiler')                     
                       .style.display=='none') {
               document.getElementById('spoiler')                                    
                       .style.display=''
            }else{
               document.getElementById('spoiler')               
                       .style.display='none'
            }">
   Show hidden content
</a>


enter <div id="spoiler2" style="display:none"> 
HIDDEN CONTENT HERE
</div> 
<a display="initial" 
   id="button" 
   title="Click to show/hide content" 
   type="button" 
   onclick="if(document.getElementById('spoiler2')                     
                       .style.display=='none') {
               document.getElementById('spoiler2')                                    
                       .style.display=''
            }else{
               document.getElementById('spoiler2')               
                       .style.display='none'
            }">
   Show hidden content
</a>

Advertisement

Answer