Danny Danny - 1 year ago 64
CSS Question

Display div and hide another div by button press

I have two divs. I need 2 buttons, one for each of them. The first div is displayed but the second is hidden. When I press the second div's button, it will display and the first div will go hidden. Again, when I press the first div's button the first div will display and the second one will go hidden. I need the html and js code for those 2 buttons. Please help. :)

Answer Source

  if(this.id == 'btn1'){
  width: 200px;
  height: 200px;
  background: cornflowerblue;
  line-height: 200px;
  text-align: center;
  margin: 10px;

  display: block;
  background: crimson;

  display: none;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
  DIV 1

<div class="div2">
  DIV 2

<button id="btn1">show Div 1</button>
<button id="btn2">show Div 2</button>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download