Bootstrap Switch Toggle Message

by hiWorld

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.css">
<div class="approve-delivery">
    <label for="inputEmail" class="control-label col-xs-5">
      Do you want to send out email?
    </label>
    <input type="checkbox" id="config-email"
    onclick="ToggleSwitchMessage('config-email', 'enable-msg', 'disable-msg')" checked/>
</div>
<div class="email-config-msg">
    <p id="enable-msg">
        All emails will be sent.
    </p>
    <p id="disable-msg">
        No email will be sent.<br/>
        Please remember, you must turn email ON again if you want emails to
        be sent during this login session.
    </p>
</div>

CSS

#enable-msg,
#disable-msg {
    visibility: hidden; 
    display: none;
}

JavaScript

$(document).ready(function () {
    $("input#config-email").bootstrapSwitch( {
    onText: 'Enable',
    onColor: 'primary',
    offText: 'Disable',
    offColor: 'warning',
    size: 'normal'
  });
});
    
function ToggleSwitchMessage(checkId, firstCommentId, secondCommentId) {
  var check_box = document.getElementById(checkId)
  var first_alert = document.getElementById(firstCommentId);
  var second_alert = document.getElementById(secondCommentId);

  if (check_box.checked == true) {
    first_alert.style.visibility = "visible";
    first_alert.style.display = "inline-block";
    second_alert.style.visibility = "hidden";
    second_alert.style.display = "none";
  } else {
    first_alert.style.visibility = "hidden";
    first_alert.style.display = "none";
    second_alert.style.visibility = "visible";
    second_alert.style.display = "inline-block";
  }
}