Button group for UI-Kit sample

button-group.html

<style>
.button-group > button{
  margin-left: 1px;
  margin-right: 0;
  background-color: #ffffff;
  color:#115361;
}

.button-group > button.button-group-selected {
  background-color: #18788d;
  color:#fff;
}

.button-group > button.button-group-unselected {
  background-color: #ffffff;
  color:#115361;
}



div.button-group {
  margin-top: 10px;
}
  
</style>

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  $('.button-group').each(function(){
    $(this).children().each(function(){
      $(this).addClass("button-group-unselected");
      $(this).click(function(){
        $(this).siblings().removeClass("button-group-selected");
        $(this).removeClass("button-group-unselected");
        $(this).addClass("button-group-selected");
      });
    })
});

/* get the selected value
$('.button-group.contact > button').each(function(){
  if($(this).hasClass('button-group-selected')){
    console.log($(this).text());
  }
});
*/

</script>

<form>
    <fieldset>
      <legend><u>How</u> should we contact you?</legend>
      <div class="button-group contact">
        <button onclick="return false;">Email</button>
        <button onclick="return false;">SMS</button>
        <button onclick="return false;">Call</button>
        <button onclick="return false;">Here</button>
      </div>
    </fieldset>
</form>