CODEWITHSUNDEEP
jqueryjavascript
topper1309
topper1309

Reputation: 151

How to toggle between two div elements using a button

I know how to toggle div, that is to hide/show elements. But how to toggle between two div's ?

<button>Change</button>
<div class="english">
  <h4><strong>English headline</strong></h4>
  <p>Eng Content</p>
</div>
<div class="hindi">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>

Upvotes: 2

Views: 3426

Answers (6)

Jon P
Jon P

Reputation: 19772

Just for fun here is an HTML/CSS only option

/*Hide Hindi initially*/

.hindi {
  display: none;
}


/*Hide the checkbox*/

#cbChange {
  margin-left: -99999px;
}


/*Use the :checked condition and general sibling selector (~)
  To Hide and show;
*/

#cbChange:checked~.hindi {
  display: block;
}

#cbChange:checked~.english {
  display: none;
}


/*Make the label button sexy*/

.lblChange {
  border-radius: 20px;
  color: #FFFFFF;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 100;
  padding: 10px;
  background-color: #3D94F6;
  box-shadow: 1px 1px 20px 0px #000000;
  text-shadow: 1px 1px 20px #000000;
  border: solid #337FED 1px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.lblChange:hover {
  background: #1E62D0;
  background-image: linear-gradient(to bottom, #1E62D0, #3D94F6);
  text-decoration: none;
}
<label for="cbChange" class="lblChange">Change</label><input id="cbChange" type="checkbox" />
<div class="english">
  <h4><strong>English headline</strong></h4>
  <p>Eng Content</p>
</div>
<div class="hindi">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>

Upvotes: 1

Praveen
Praveen

Reputation: 841

Just use common class for hide and toggle it!

$('button').click(function(){
  $('.common').toggleClass("hide-dom");
});
.hide-dom {display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change</button>
<div class="common">
  <h4><strong>English headline</strong></h4>
  <p>English Content</p>
</div>
<div class="common hide-dom">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>

Upvotes: 2

Mamun
Mamun

Reputation: 68933

Initially set display: none to the second div. Then use toggle() on both the div when clicking the button like the following way:

$('button').click(function(){
  $('.english, .hindi').toggle();
});
.hindi {display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change</button>
<div class="english active">
  <h4><strong>English headline</strong></h4>
  <p>Eng Content</p>
</div>
<div class="hindi">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>

Upvotes: 2

Gaurav joshi
Gaurav joshi

Reputation: 1799

function toggleDiv() {
  var englishDiv = $('#english');
  var hindiDiv = $('#hindi');
    englishDiv.toggle();
    hindiDiv.toggle();
}
.english {
  display: block;
}

.hindi {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="toggleDiv()">Change</button>
<div class="english" id="english">
  <h4><strong>English headline</strong></h4>
  <p>Eng Content</p>
</div>
<div class="hindi" id="hindi">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>

Upvotes: 0

Kiran Shahi
Kiran Shahi

Reputation: 7980

If you have only two div then this is one way you can do. 

$('.hindi').hide();
$('button').on('click', function(){
  $('.english, .hindi').toggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change</button>
<div class="english">
  <h4><strong>English headline</strong></h4>
  <p>Eng Content</p>
</div>
<div class="hindi">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

you can make use of toggle() function in jquery. hide any one div and show other initially and then call toggle() on button click

$(function(){
  $('div.hindi').hide();// hide it initially
  $('button').on('click', function(){
     $('div.english, div.hindi').toggle();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change</button>
<div class="english">
  <h4><strong>English headline</strong></h4>
  <p>Eng Content</p>
</div>
<div class="hindi">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>

Upvotes: 5

Related Questions