title: Display message upon Switch button toggle
body: <p>I am using <a href="http://www.bootstrap-switch.org/" rel="nofollow">Bootstrap Switch</a> to turn my check-box in toggle switches. </p>
  
  <p>Now I want to display different messages based on whether the switch is ON or OFF. Sounds simple enough...but I can't seem to make it work :( </p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="approve-delivery"&gt;
    &lt;label for="config-email" class="control-label col-xs-5"&gt;
      Do you want to send out email?
    &lt;/label&gt;
    &lt;input type="checkbox" id="config-email" onclick="ToggleSwitchMessage('config-email', 'enable-msg', 'disable-msg')" checked/&gt;
  &lt;/div&gt;
  
  &lt;div class="email-config-msg"&gt;
    &lt;p id="enable-msg"&gt;
        All emails will be sent.
    &lt;/p&gt;
    &lt;p id="disable-msg"&gt;
        No email will be sent.&lt;br/&gt;
        Please remember, you must turn email ON again if you want emails to
        be sent during this login session.
    &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my jQuery:</p>
  
  <pre><code>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";
    }
  }
  </code></pre>
  
  <p>Here is my working <a href="https://jsfiddle.net/hiWorld/a29bc42b/" rel="nofollow">JSFiddle</a></p>
  
  <p>Again, this is what I'm trying to do:</p>
  
  <ul>
  <li>based on the check-box checked/unchecked, the proper message should be displaying on the page when it loads</li>
  <li>then if the check-box's option is changed, it should display appropriate message</li>
  </ul>
  
  <p>I hope I am making sense (English is not my first language)! Also I'm sorry if it's duplicate question, in that case please provide the URL of the Q/A(s). </p>
  
  <p>Thank you in advance for your time and help!!</p>