Button that switches DIV content

Question

I'm creating something for a pricing table that needs to be able to convert between Pounds and Dollars, I have the base of this down, with a sliding mechanic, unfortunately you're able to click "Sterling" more than once to produce the function of it converting between both prices, i'm wondering how I can make it so that it can only perform the function once, to get rid of this issue

var shown = 'sterling';

function swap() {
  if (shown === 'sterling') {
    document.getElementById('dollars-1').style.display = "inline-block";
    document.getElementById('dollars-2').style.display = "inline-block";
    document.getElementById('dollars-3').style.display = "inline-block";
    document.getElementById('sterling-1').style.display = "none";
    document.getElementById('sterling-2').style.display = "none";
    document.getElementById('sterling-3').style.display = "none";
    shown = 'dollars';
  } else {
    document.getElementById('sterling-1').style.display = "inline-block";
    document.getElementById('sterling-2').style.display = "inline-block";
    document.getElementById('sterling-3').style.display = "inline-block";
    document.getElementById('dollars-1').style.display = "none";
    document.getElementById('dollars-2').style.display = "none";
    document.getElementById('dollars-3').style.display = "none";
    shown = 'sterling';
  }
};

body {
  background-color: #707070;
}

.switch {
  position: relative;
  height: 26px;
  width: 120px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

.switch-label {
  position: relative;
  z-index: 2;
  float: left;
  width: 58px;
  line-height: 26px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.switch-label:active {
  font-weight: bold;
}

.switch-label-off {
  padding-left: 2px;
}

.switch-label-on {
  padding-right: 2px;
}


/*
 * Note: using adjacent or general sibling selectors combined with
 *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
 *       See this article for more info and a potential fix:
 *       http://css-tricks.com/webkit-sibling-bug/
 */

.switch-input {
  display: none;
}

.switch-input:checked+.switch-label {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.65);
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  -webkit-transition: 0.15s ease-out;
  -moz-transition: 0.15s ease-out;
  -o-transition: 0.15s ease-out;
  transition: 0.15s ease-out;
}

.switch-input:checked+.switch-label-on~.switch-selection {
  left: 60px;
  /* Note: left: 50% doesn't transition in WebKit */
}

.switch-selection {
  display: block;
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 2px;
  width: 58px;
  height: 22px;
  background: #65bd63;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
  background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
  background-image: -o-linear-gradient(top, #9dd993, #65bd63);
  background-image: linear-gradient(to bottom, #9dd993, #65bd63);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  -webkit-transition: left 0.15s ease-out;
  -moz-transition: left 0.15s ease-out;
  -o-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out;
}

<button id="sterling-1">£100.00</button>
<button id="sterling-2">£100.00</button>
<button id="sterling-3">£100.00</button>
<button id="dollars-1" style="display:none">$131.00</button>
<button id="dollars-2" style="display:none">$131.00</button>
<button id="dollars-3" style="display:none">$131.00</button>
<br/>
<br/>

<div class="switch">
  <input type="radio" class="switch-input" name="view" value="week" id="week" checked>
  <label for="week" class="switch-label switch-label-off" id="swap" onclick="swap()">Sterling</label>
  <input type="radio" class="switch-input" name="view" value="month" id="month">
  <label for="month" class="switch-label switch-label-on" id="swap" onclick="swap()">Dollars</label>
  <span class="switch-selection"></span>
</div>

Any help would be appreciated!

Answer 1

Set the swap function as a callback for the change event of the radio buttons instead, so it will only be called once the state of the switch changes.

On a side note, it would be agood idea to give your radio buttons more meaningful names. "week" and "month" doesn't seem to make much sense here. ;-) And also, you are using the id="swap" twice, but IDs must be unique.

document.getElementById('currency_sterling').addEventListener('change', swap);
document.getElementById('currency_dollars').addEventListener('change', swap);

function swap(ev) {
  if (ev.target.value === 'dollars') {
    document.getElementById('dollars-1').style.display = "inline-block";
    document.getElementById('dollars-2').style.display = "inline-block";
    document.getElementById('dollars-3').style.display = "inline-block";
    document.getElementById('sterling-1').style.display = "none";
    document.getElementById('sterling-2').style.display = "none";
    document.getElementById('sterling-3').style.display = "none";
  } else {
    document.getElementById('sterling-1').style.display = "inline-block";
    document.getElementById('sterling-2').style.display = "inline-block";
    document.getElementById('sterling-3').style.display = "inline-block";
    document.getElementById('dollars-1').style.display = "none";
    document.getElementById('dollars-2').style.display = "none";
    document.getElementById('dollars-3').style.display = "none";
  }
};

body {
  background-color: #707070;
}

.switch {
  position: relative;
  height: 26px;
  width: 120px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

.switch-label {
  position: relative;
  z-index: 2;
  float: left;
  width: 58px;
  line-height: 26px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.switch-label:active {
  font-weight: bold;
}

.switch-label-off {
  padding-left: 2px;
}

.switch-label-on {
  padding-right: 2px;
}


/*
 * Note: using adjacent or general sibling selectors combined with
 *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
 *       See this article for more info and a potential fix:
 *       http://css-tricks.com/webkit-sibling-bug/
 */

.switch-input {
  display: none;
}

.switch-input:checked+.switch-label {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.65);
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  -webkit-transition: 0.15s ease-out;
  -moz-transition: 0.15s ease-out;
  -o-transition: 0.15s ease-out;
  transition: 0.15s ease-out;
}

.switch-input:checked+.switch-label-on~.switch-selection {
  left: 60px;
  /* Note: left: 50% doesn't transition in WebKit */
}

.switch-selection {
  display: block;
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 2px;
  width: 58px;
  height: 22px;
  background: #65bd63;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
  background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
  background-image: -o-linear-gradient(top, #9dd993, #65bd63);
  background-image: linear-gradient(to bottom, #9dd993, #65bd63);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  -webkit-transition: left 0.15s ease-out;
  -moz-transition: left 0.15s ease-out;
  -o-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out;
}

<button id="sterling-1">£100.00</button>
<button id="sterling-2">£100.00</button>
<button id="sterling-3">£100.00</button>
<button id="dollars-1" style="display:none">$131.00</button>
<button id="dollars-2" style="display:none">$131.00</button>
<button id="dollars-3" style="display:none">$131.00</button>
<br/>
<br/>

<div class="switch">
  <input type="radio" class="switch-input" name="currency" value="sterling" id="currency_sterling" checked>
  <label for="currency_sterling" class="switch-label switch-label-off">Sterling</label>
  <input type="radio" class="switch-input" name="currency" value="dollars" id="currency_dollars">
  <label for="currency_dollars" class="switch-label switch-label-on">Dollars</label>
  <span class="switch-selection"></span>
</div>

Answer 2

Rather than keeping what is shown in a variable that you manually swap every time either option is clicked, pass the price type in to the swap function and then display what you want to based off of that. This way, they can click either button as many times as they like, but it will only change when the other option is clicked. I made the changes to your example.

function swap(priceType) {
  if (priceType === 'dollars') {
    document.getElementById('dollars-1').style.display = "inline-block";
    document.getElementById('dollars-2').style.display = "inline-block";
    document.getElementById('dollars-3').style.display = "inline-block";
    document.getElementById('sterling-1').style.display = "none";
    document.getElementById('sterling-2').style.display = "none";
    document.getElementById('sterling-3').style.display = "none";
  } else {
    document.getElementById('sterling-1').style.display = "inline-block";
    document.getElementById('sterling-2').style.display = "inline-block";
    document.getElementById('sterling-3').style.display = "inline-block";
    document.getElementById('dollars-1').style.display = "none";
    document.getElementById('dollars-2').style.display = "none";
    document.getElementById('dollars-3').style.display = "none";
  }
};

body {
  background-color: #707070;
}

.switch {
  position: relative;
  height: 26px;
  width: 120px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

.switch-label {
  position: relative;
  z-index: 2;
  float: left;
  width: 58px;
  line-height: 26px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.switch-label:active {
  font-weight: bold;
}

.switch-label-off {
  padding-left: 2px;
}

.switch-label-on {
  padding-right: 2px;
}


/*
 * Note: using adjacent or general sibling selectors combined with
 *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
 *       See this article for more info and a potential fix:
 *       http://css-tricks.com/webkit-sibling-bug/
 */

.switch-input {
  display: none;
}

.switch-input:checked+.switch-label {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.65);
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  -webkit-transition: 0.15s ease-out;
  -moz-transition: 0.15s ease-out;
  -o-transition: 0.15s ease-out;
  transition: 0.15s ease-out;
}

.switch-input:checked+.switch-label-on~.switch-selection {
  left: 60px;
  /* Note: left: 50% doesn't transition in WebKit */
}

.switch-selection {
  display: block;
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 2px;
  width: 58px;
  height: 22px;
  background: #65bd63;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
  background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
  background-image: -o-linear-gradient(top, #9dd993, #65bd63);
  background-image: linear-gradient(to bottom, #9dd993, #65bd63);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  -webkit-transition: left 0.15s ease-out;
  -moz-transition: left 0.15s ease-out;
  -o-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out;
}

<button id="sterling-1">£100.00</button>
<button id="sterling-2">£100.00</button>
<button id="sterling-3">£100.00</button>
<button id="dollars-1" style="display:none">$131.00</button>
<button id="dollars-2" style="display:none">$131.00</button>
<button id="dollars-3" style="display:none">$131.00</button>
<br/>
<br/>

<div class="switch">
  <input type="radio" class="switch-input" name="view" value="week" id="week" checked>
  <label for="week" class="switch-label switch-label-off" id="swap" onclick="swap('sterling')">Sterling</label>
  <input type="radio" class="switch-input" name="view" value="month" id="month">
  <label for="month" class="switch-label switch-label-on" id="swap" onclick="swap('dollars')">Dollars</label>
  <span class="switch-selection"></span>
</div>