Onclick Show Div And Hide Other Div
Last Updated : Jan 1, 2023
In this article, we are going to show some codes below with the help of which we can done this. Let see the code.
Step By Step Guide On Onclick Show Div And Hide Other Div :-
As, here below we can see that there is a code with the help of which we are able to create two divisions and a button also.
When you run this code, on browser you see only one div with text DIV1 and a button with text click me.
Now, when you click on this button you see that the text DIV1 disappears and it replaces with DIV2.
As, we want to say that DIV1 disappears and replaces with DIV2. Now, let us see code.
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Now, here before closing head, we write our script, you can use this or write this before closing body also.
- Now, inside body here we create two divisions with different id’s and with a button. On click on button our showhide() function runs. One thing to note here that our second div is not visible, because we use display none on that.
- Now, in script we create a show hide function and inside this function. We write here that if our first division is not display then it will display our first division and hides second one.
- But if first division is already display then it will not be displayed on click of button and then second displayed. This all is done with the help of if condition, you can see codes in our example.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
I hope this tutorial on onclick show div and hide other div helps you and the steps and method mentioned above are easy to follow and implement.