show div box after click a button in javascript


Hello guys, Today I am going to teach you the way to display a text on a div box after click on a button. This script will work purely with Java-script. So you don't require to embed any kind of java-script library with your web application work out this tutorial.

Some Cool Javscript Tutorials:

How to Show Div Box or Text After Click on a Button:

It is very easy to work out this tutorial. In this tutorial I am going to use the below HTML code to display button and div box. So, just create a HTML page and copy and paste the below HTML code to it.
<div id="welcomeDiv"  style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
  • On the above code, id="welcomeDiv" used to identify the div box which is in hidden mod and onclick="showDiv()" is using to send event to the function.
function showDiv() {
   document.getElementById('welcomeDiv').style.display = "block";
  • The above code is the function to display the div box. When the user click on the button, this function will trigger and show the div box to the user.
You can also change the function to hide div box from users by changing the style.display ="display" to style.display = "none". By using the real-time demo with JSFiddle, you test the script live and append to your web application.

Suggested Article for Developers:

I hope you well enjoyed this article. If you have any doubts or suggestions related to this article. Please let us know by using the comment box that given below. Thanks


  1. One way JavaScript is commonly used is to hide or display content based on user behavior. For example, you can choose a user when completing the on-line form, and their choice may result in other relevant forms. In this lesson, you will use CSS and JavaScript to display and hide the clock you created. GST Returns Filing


Wapmaster or Webmaster can Comment Us with the following Comment Box . Don't add Links to your site for Spamming our Blog .. Once you add Comment with Link . It will be deleted immediatly by our Admins .