<form>

  <fieldset>  

    <label class="active">

      <input type="radio" name="class" value="container--one" class="radio" checked="checked">

      <code>display:block</code>

    </label>        

    <label>

      <input type="radio" name="class" value="container--two" class="radio">

      <code>display:none</code>

    </label>     

    <label>

      <input type="radio" name="class" value="container--three"class="radio">

      <code>display:contents</code>

    </label>

  </fieldset>  

</form>

​

<div class="container container--one" id="container">

  <p>

    Box 1…

  </p>

  <p>

    Box 2…

  </p>

  <p>

    Box 3…

  </p>  

</div>

.container--one {

  display: block;

}

​

.container--two {

  display: none;

}

​

.container--three {

  display: contents;

}

​

​

/* ETC (Formatting only): */

​

body {

  margin: 1.5em;

  font-size: 130%;

  font-family: sans-serif;

  background: #F2F0EC;

  color: #2E2C08;

}

​

.container {

  border: 10px solid #2E2C08;

  background: white;  

  padding: 1em;

}

​

.container p {

  padding: 0.5em;

  text-align: center;

  color: #2E2C08;

  background: #e5e3de; 

  font-weight: bold;

  margin: 0 0 0.5em;

}

​

​

fieldset {

  border: #abab9d 1px solid;

  padding: 0;

  margin-bottom: 2em; 

}

​

label {

  display: inline-block;

  padding: 0.5em;

  cursor: pointer;

}

​

.active {

  background: #abab9d;

}

var radios = document.querySelectorAll('.radio');

var container = document.getElementById('container');

radios.forEach(function(i){

    i.addEventListener('click', function(el){

        var clicked = el.currentTarget;

        var active = clicked.parentElement.parentElement.querySelector('.active');

        active && active.classList.remove('active');

        clicked.parentElement.classList.add('active');     

        container.className = 'container '+clicked.value;

    });

});