Switch Button - switching html

Question

I'm looking for some assistance with a website I'm coding. I have an HTML and CSS switch button (or label):

HTML:

<label class="switch">
  <input type="checkbox"></input>
  <div class="slider round"></div>
</label>

CSS:

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;

}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Here is just what the button looks like: https://jsfiddle.net/pbxn2egc/

Essentially what I want or am trying to do is when the button is toggled, I would like for it to show the price of 5 items (that I hard-coded in, so like standard html) and then when you toggle the button it hides that text and shows the competitors price by showing that text.

So if the button is left, I want Walmart's prices. If the button gets toggled to the right, Walmart's prices hide, and Target's appear in the same location.

Can someone assist me with this? Thanks!

Answer 1

One approach is to listen for the onchange event on your <input> element.

Then, when the box is checked/unchecked, you can determine which element (price) is visible and display the other.

document.getElementById("mySwitch").onchange = function() {
  var priceA = document.getElementById("priceA");
  var priceB = document.getElementById("priceB");
  if (priceA.classList.contains("hidden")) {
    priceA.className = "shown";
    priceB.className = "hidden";
  } else if (priceB.classList.contains("hidden")) {
    priceB.className = "shown";
    priceA.className = "hidden";
  }
}

.shown {
}

.hidden {
  display: none;
}

<input type="checkbox" id="mySwitch"></input>
<div class="slider round"></div>

<div id="priceA" class="shown">Price A</div>
<div id="priceB" class="hidden">Price B</div>

If you're using jQuery, there's a toggleClass() method that will automatically toggle an element between two classes.

Answer 2

function togglePrices() {  
  Array.from(document.querySelectorAll('.price')).forEach(function (f) {
    f.classList.toggle('hidden');
  });
}

.hidden {
  display: none;
}

<input type="checkbox" onchange="togglePrices()">  Competitors Price

<div class="price">
  <h3>Our Price</h3>
  water $10.00<br/>
  beer $12.00<br/>
  wine $20.00
</div>

<div class="price hidden">
  <h3>Competitors Price</h3>
  water $12.00<br/>
  beer $15.00<br/>
  wine $24.00
</div>

Answer 3

In comparison with the answer from @rphv, this is how I would do it...

I have a div for pricing; within that is a div for our prices and another for their prices. The pricing container is unique on the page, and I give it an ID to signify its purpose.

I give the two price divs two classes each; they both get the class "price" and then either "ours" or "theirs", again to describe what they are (not how they look)

The HTML is now a descriptive structure of the data it contains, without bothering with appearance (because appearance is the job of CSS, not HTML)

We start off displaying our prices, so things with class "ours" are displayed when they are within the pricing div #pricing .price.ours; things with class "theirs" are not displayed #pricing .price.theirs.

Later, when the pricing div has class theirs we will show their prices, not ours — so let's hook up our toggle.

One should prefer attaching event handlers over using inline "onevent" javascript handlers, so I gave the checkbox an ID to easily select it, then use addEventListener so the change event will call togglePrices The togglePrices could have been a one-liner, I only assigned the var because you often want to do several things with the selected element. Here I simply toggle the class "theirs" on and off.

What happens when that class is toggled is that it just makes a different set of CSS rules apply to the inner price divs. An "ours" within a "theirs" does not display frp, the #pricing.theirs .price.ours rule. A .theirs within a .theirs does display.

I wish the stack snippet showed in reverse the order used — I think this demonstration makes more sense reading the HTML first, then the CSS, and the JS third.

function togglePrices() {
  var pricing = document.getElementById('pricing');
  pricing.classList.toggle('theirs');
}
document.getElementById('competition')
        .addEventListener('change', togglePrices);

#pricing {
  margin-top: 1em;
}
#pricing .price.ours,
#pricing.theirs .price.theirs
{
  display: block;
}

#pricing .price.theirs,
#pricing.theirs .price.ours
{
  display: none;
}

<input type="checkbox" id="competition">
<label for="competition">Competitor's Price</label>

<div id="pricing">
  
  <div class="price ours">
    <strong>Our Price</strong><br>
    water $1.00<br>
    beer $3.00<br>
    wine $4.50
  </div>

  <div class="price theirs">
    <strong>Competitors Price</strong><br>
    water $1.25<br>
    beer $4.00<br>
    wine $5.50
  </div>

</div>