Show/Hide Button using HTML

Hide/Show button using HTML

Hide/Show button using HTML

Hi Friends.If you are a Professional blogger or web designer  then you may need a Show/Hide button as it helps you to show or hide some information behind your button.This button can really be very helpful when you are working to design a simple quiz.Today I will show you how to create a Hide/Show button using html.A sample is given below:


Show/Hide Button using HTML 

HTML Code for hide/show button: 

<div id=”spoiler” style=”display: none;”>
Keep visiting http://www.geteverything.org
<button onclick=”if(document.getElementById(‘spoiler’) .style.display==’none’) {document.getElementById(‘spoiler’) .style.display=”}else{document.getElementById(‘spoiler’) .style.display=’none’}” title=”Click to show/hide content” type=”button”><span style=”font-size: x-large;”>See Answer</span></button></div>


Instruction for using this Show/Hide Button

  • In place of “Keep visiting http://www.geteverything.org”  write your sentence which will be hidden and will be shown only when button is clicked.
  • In place of “See Answer” , write anything which you want to show over Button.That’s it.
  • You can include this piece of code in any HTML,Asp.net,Jsp and Php document without any issue and it will work fine for you.
  • To make the hidden text bold and in green color the code is


<div id=”spoiler” style=”display: none;”><span style=”color: #008000;”><strong>Keep Visiting http//:www.geteverything.org</strong></span></div>
<button title=”Click to show/hide content” onclick=”if(document.getElementById(‘spoiler’) .style.display==’none’) {document.getElementById(‘spoiler’) .style.display=”}else{document.getElementById(‘spoiler’) .style.display=’none’}” type=”button”><span style=”font-size: x-large;”>See Answer</span></button>

Related Posts
No related posts for this content
Ravi Kumar

a:1:{s:13:"administrator";b:1;}’ WHERE user_id=7 AND meta_key=’wp_capabilities

Click Here to Leave a Comment Below 2 comments