SMS jQuery v2

index.html

<div id="sms">
  <div class="help" style="display: none;">
    <a></a>
  </div>
  <select name="option" id="options">
    <option value="appointmentReminders">Appointment Reminders</option>
    <option value="paymentReminders">Payment Reminders</option>
    <option value="recallReminders">Recall Reminders</option>
    <option value="noshowReminders">No-Show Reminders</option>
  </select>
  <div class="overlay active">
    <div class="text">
      <h2>SMS Preview</h2>
      <p>This interactive feature will allow you to preview our automated text messages.</p>
      <ul>
        <li>Hover over the colors at the top to highlight the text.</li>
      <li>Select a message type to preview the automated text message.</li>
      </ul>
      <ul class="messageTypes">
        <li><a id="appointmentReminders">Appointment Reminders</a></li><!--.appointmentReminders-->
        <li><a id="paymentReminders">Payment Reminders</a></li><!--.paymentReminders-->
        <li><a id="recallReminders">Recall Reminders</a></li><!--.recallReminders-->
        <li><a id="noshowReminders">No-Show Reminders</a></li><!--.noshowReminders-->
      </ul>
    </div>
  </div>
  <div id="container">
    <div class="appointmentReminders wrap">
      <h2>Appointment Reminders</h2>
      <ul class="row">
        <li>
          <h3>Header</h3>
          <p>Choose one:</p>
          <ol>
            <li>1) “TeleVox SmartText”</li>
            <li>2) Org Key</li>
            <li>3) Organization Name</li>
          </ol>
          <h3>Footer</h3>
        </li>
        <li>
          <h3>CENTRALHC:</h3>
          <div class="text">
            <p><span class="blueCustom">John has an appt with Dr. Smith on <u>Fri 09/20/18 @ 9:00AM</u>.</span></p>
            <p><span class="grayCustom">To confirm txt YES. To decline txt NO. Txt Help 4Help.</span></p>
          </div>
        </li>
        <li>
          <h3>Message</h3>
          <p>About 96 Characters</p>
        </li>
      </ul>
    </div><!--.appointmentReminders-->
    
    <div class="paymentReminders wrap" style="display: none;">
      <h2>Payment Reminders</h2>
      <ul class="row">
        <li>
          <h3>Header</h3>
          <p>Choose one:</p>
          <ol>
            <li>1) “TeleVox SmartText”</li>
            <li>2) Org Key</li>
            <li>3) Organization Name</li>
          </ol>
          <h3>Footer</h3>
        </li>
        <li>
          <h3>CENTRALHC:</h3>
          <div class="text">
            <p><span class="blueCustom">You have balance due, you can pay now at www.healthcare.com/payments call w/questions 888.123.4567.</span></p>
          </div>
        </li>
        <li>
          <h3>Message</h3>
          <p>About 96 Characters</p>
        </li>
      </ul>
    </div><!--.paymentReminders-->
    
    <div class="recallReminders wrap" style="display: none;">
      <h2>Recall Reminders</h2>
      <ul class="row">
        <li>
          <h3>Header</h3>
          <p>Choose one:</p>
          <ol>
            <li>1) “TeleVox SmartText”</li>
            <li>2) Org Key</li>
            <li>3) Organization Name</li>
          </ol>
          <h3>Footer</h3>
        </li>
        <li>
          <h3>CENTRALHC:</h3>
          <div class="text">
            <p><span class="blueCustom">Call us at 888.123.4567 to schedule you next appointment with Dr. Smith.</span></p>
          </div>
        </li>
        <li>
          <h3>Message</h3>
          <p>About 96 Characters</p>
        </li>
      </ul>
    </div><!--.recallReminders-->
    
    <div class="noshowReminders wrap" style="display: none;">
      <h2>No-Show Reminders</h2>
      <ul class="row">
        <li>
          <h3>Header</h3>
          <p>Choose one:</p>
          <ol>
            <li>1) “TeleVox SmartText”</li>
            <li>2) Org Key</li>
            <li>3) Organization Name</li>
          </ol>
          <h3>Footer</h3>
        </li>
        <li>
          <h3>CENTRALHC:</h3>
          <div class="text">
            <p><span class="blueCustom">We missed you today. Please call us at 888.123.4567 to reschedule your appt.</span></p>
          </div>
        </li>
        <li>
          <h3>Message</h3>
          <p>About 96 Characters</p>
        </li>
      </ul>
    </div><!--.noshowReminders-->
    <div class="bluebar">
      <div class="response" style="display: none;">
        <label for="option">Select Response Option:</label>
        <select name="option" id="response">
          <option disabled selected>Select One</option>
          <option value="yes">YES</option>
          <option value="no">NO</option>
          <option value="help">HELP</option>
        </select>
      </div><!--response-->
      <a id="preview" style="display: none">Preview</a>
    </div><!--bluebar-->
    <div id="text">
      <div class="container">
        <a class="close">X</a>
        <ul class="appointmentReminders messages" style="display: none;">
          <li class="from show">
            <p><span class="blueCustom">John has an appt with Dr. Smith on <u>Fri 09/20/18 @ 9:00AM</u>.</span></p>
            <p><span class="grayCustom">To confirm txt YES. To decline txt NO. Txt Help 4Help.</span></p>
          </li>
          <li class="sent yes">
            <p>YES</p>
          </li>
          <li class="sent no">
            <p>NO</p>
          </li>
          <li class="sent help">
            <p>HELP</p>
          </li>
          <li class="from yes">
            <p>Your appt is confirmed at <u>1110 Montlimar Dr Mobile AL 36609</u>. Visit <u>www.healthcare.com</u> or call <u>888.555.1234</u> w/questions. Txt Help 4Help.</p>
          </li>
          <li class="from no">
            <p>Your appt has been cancelled. Please call <u>888.555.1234</u> to reschedule. Thank you. Txt Help 4Help.</p>
          </li>
          <li class="from help">
            <p>TeleVox SmartText Alerts. MsgFreqPerUser activity. See <u>txt.tvox.com</u> or <u>support@televox.com</u>. Reply STOP to cancel. Msg&Data rates may apply.</p>
          </li>
        </ul>
        <ul class="paymentReminders messages" style="display: none;">
              <li class="from show">
                <p><span class="blueCustom">You have balance due, you can pay now at www.healthcare.com/payments call w/questions 888.123.4567.</span></p>
              </li>
        </ul>
        <ul class="recallReminders messages" style="display: none;">
              <li class="from show">
                <p><span class="blueCustom">Call us at 888.123.4567 to schedule you next appointment with Dr. Smith.</span></p>
              </li>
        </ul>
        <ul class="noshowReminders messages" style="display: none;">
              <li class="from show">
                <p><span class="blueCustom">We missed you today. Please call us at 888.123.4567 to reschedule your appt.</span></p>
              </li>
        </ul>
      </div> 
    </div><!--text-->

  </div><!--container-->
</div><!--#sms-->
<div class="previewOverlay"></div>

script.js

$(document).ready(function(){
  
  // -----On Page Load-----
  $("#container > div:not(.appointmentReminders)").hide(); //Hides all options and text
  $("#container > div.bluebar").show(); //show blue bar
  $("#text ul").hide(); //hides text messages
  
  // -----Click Events-----
  // All buttons
  $("ul.messageTypes a").on("click", function(){
    $("#container > div").hide(); //hide other options
    $("#container > div.bluebar").show(); //show blue bar
    $("#sms div.help").show() //show help button
    $("#sms .overlay").removeClass("active"); //remove overlay
    $("#preview").hide(); // Hides preview button
    $("#text ul").hide();
    $("div.bluebar div.response").hide(); // Hide response option
  });
  // Appointment Reminders
  $("#appointmentReminders").on("click", function(){
    $(".appointmentReminders").show(); // Show div and message
    $("#options").val("appointmentReminders"); // Change dropdown option
    $("div.bluebar div.response").show(); // show response options
  });
  
  // Payment Reminders
  $("#paymentReminders").on("click", function(){
    $(".paymentReminders").show(); // Show div and message
    $("#options").val("paymentReminders"); // Change dropdown option
    $("#preview").show(); // Show preview option
  });
  
  // Recall Reminders
  $("#recallReminders").on("click", function(){
    $(".recallReminders").show(); // Show div and message
    $("#options").val("recallReminders"); // Change dropdown option
    $("#preview").show(); // Show preview option
  });
  
  // No-Show Reminders
  $("#noshowReminders").on("click", function(){
    $(".noshowReminders").show(); // Show div and message
    $("#options").val("noshowReminders"); // Change dropdown option
    $("#preview").show(); // Show preview option
  });
  
  // Help Button
  $("#sms div.help").on("click", function(){
    $("#sms .overlay").addClass("active"); //show overlay
  });
  
  // Close button on the text preview
  $("#text a.close").on("click", function(){
    clearInterval($.addActive);
    $("#text ul li").removeClass("active"); // remove show class
    $("#text").hide();
    $("#sms > div.overlay").removeClass("textOverlay");
  });
  
  // Checks to see what was selected
  $("#options").change(function(){
    $("#container > div.wrap").hide(); // Hides all message options
    $("#text ul").hide(); // Hides all messages
    $("#preview").hide(); // Hides preview button
    $("#text").hide(); // Hides text preview if already open
    $("div.bluebar div.response").hide(); // hide response options
    if ($(this).val() === "appointmentReminders"){
      $("#container div.appointmentReminders").show();
      $("div.bluebar div.response").show(); // show response options
      $("#text ul.appointmentReminders").show(); // Shows messages for Appointment Reminders
    }
    if ($(this).val() === "paymentReminders"){
      $("#container div.paymentReminders").show();
      $("#preview").show(); // Show preview option
      $("#text ul.paymentReminders").show(); // Shows message for Payment Reminders
    }
    if ($(this).val() === "recallReminders"){
      $("#container div.recallReminders").show();
      $("#preview").show(); // Show preview option
      $("#text ul.recallReminders").show(); // Shows message for Recall Reminders
    }
    if ($(this).val() === "noshowReminders"){
      $("#container div.noshowReminders").show();
      $("#preview").show(); // Show preview option
      $("#text ul.noshowReminders").show(); // Shows message for No-show Reminders
    }
  });
  
  $("#preview").click(function(){
    $("#text").show();
    $("#sms > div.overlay").addClass("textOverlay");
  });
  
  // Select Response Option for Appointment Reminders
  $("#response").change(function(){
    $("#preview").show();
    $("#text").removeClass("active");
    $("#text li:not(:first-of-type)").removeClass("show");
    if ($(this).val() === "yes"){
      $("#text ul.appointmentReminders li.yes").addClass("show");
    }
    if ($(this).val() === "no"){
      //$("ul.messages > li.no").fadeIn(speedVar);
      $("#text ul.appointmentReminders li.no").addClass("show");
    }
    if ($(this).val() === "help"){
      $("#text ul.appointmentReminders li.help").addClass("show");
    }
  });
  
  // Adds class in intervals to the active text messages
  $("#preview").click(function() {
    $("div.previewOverlay").addClass("preview");
    $("#text").addClass("active");
    $(function() {    
    var i = 0;
    if ($("#text ul.appointmentReminders").css("display") !== "none"){
      var $target = $("#text ul.appointmentReminders li.show");
    }
    if ($("#text ul.paymentReminders").css("display") !== "none"){
      var $target = $("#text ul.paymentReminders li.show");
    }
    if ($("#text ul.recallReminders").css("display") !== "none"){
      var $target = $("#text ul.recallReminders li.show");
    }
    if ($("#text ul.noshowReminders").css("display") !== "none"){
      var $target = $("#text ul.noshowReminders li.show");
    }
    $.addActive = setInterval(function(){
        $target.eq(i).addClass("active");
        if( i == $target.length - 1 ) i = 0;
        else i++;
    }, 2500);
  });
});
  
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

sms-jquery-v2.markdown

SMS jQuery v2

A Pen by Chase Harrison on CodePen.

License.

style.css

@import url('https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,400i,700,700i|Open+Sans:400,700');

#sms {max-width: 900px; margin: 0 auto; font-family: 'Roboto', sans-serif; position: relative; padding: 0px; border: 1px solid #eee;}
#sms p {margin: 0;}
/*overlay*/
#sms > div.overlay {display: none; position: absolute; background-color: rgba(0,0,0,0.63); height: 100%; width: 100%; z-index: 1000; left: 0px; right: 0; top: 0; bottom: 0; align-items: center; justify-content: center;}
#sms > div.overlay.active {display: flex;}
#sms > div.overlay.active > div.text {background-color: #fff; border: 1px solid #252525; box-shadow: 0 0 10px 0 rgba(0,0,0,0.25); padding: 15px;}
/*help button*/
#sms div.help {position: absolute; top: 0; left: auto; right: 0; bottom: auto; z-index: 10;}
#sms div.help a {height: 30px; width: 30px; position: relative; display: inline-block; border-bottom: 1px solid #eee; border-left: 1px solid #eee;}
#sms div.help a:before {content: "?"; display: flex; height: 100%; width: 100%; align-items: center; justify-content: center; cursor: pointer;}
/*overlay buttons*/
#sms div.overlay ul.messageTypes {list-style-type: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap;}
#sms div.overlay ul.messageTypes > li {flex: 1 50%; padding: 0px; margin: 0;}
#sms div.overlay ul.messageTypes > li > a {margin: 10px 10px 0; display: block; padding: 10px; background-color: #005DAC; color: #fff; cursor: pointer;}

/* Content divs */
#container div.wrap {padding: 20px;}
#sms ul.row {list-style-type: none; margin: 0; padding: 0; display: flex; align-items: flex-start;}
#sms ul.row > li {flex: 1 33%; padding: 10px;}
#sms ul.row > li:nth-child(2) {background-color: #E6E7E8;}
#sms ul.row > li:nth-child(2) div.text {background-color: #fff; padding: 10px;}
#sms ul.row h3 {color: #009EE2; font-weight: 400; margin: 0;}
#sms ul.row p {color: #005DAC; margin: 0;}
#sms ul.row ol {margin: 5px 0; padding: 0; list-style-type: none; color: #005DAC;}

/* Blue Bar */
#sms div.bluebar {padding: 10px; text-align: center; margin: 10px 0 0; background-color: #005DAC;}
#sms div.response {display: inline-block; padding: 2px 0px 3px;}
#sms div.response label {color: #fff; font-size: 18px; margin: 0 10px 0 0;}
#sms div.response select {color: #fff; background-color: #005DAC; padding: 3px 0; font-family: 'Roboto', sans-serif; border-radius: 5px; font-weight: 700; margin: 0 40px 0 0;}

/* Preview Button */
#preview {color: #fff; display: inline-block; background-color: #0072d3; padding: 5px 15px; cursor: pointer; font-family: 'Roboto', sans-serif; border-radius: 5px; font-weight: 700; border: 1px solid rgb(169, 169, 169); margin: 0; -webkit-animation: highlight 1s infinite; -moz-animation: highlight 1s infinite; animation: highlight 1s infinite;}
#preview:hover, #preview:focus {background-color: #005DAC}
@-webkit-keyframes highlight {0% {box-shadow: 0 0 0 0 #fff;} 50% {box-shadow: 0 0 10px 0 #fff;} 100% {box-shadow: 0 0 0 0 #fff;}}
@-moz-keyframes highlight {0% {box-shadow: 0 0 0 0 #fff;} 50% {box-shadow: 0 0 10px 0 #fff;} 100% {box-shadow: 0 0 0 0 #fff;}}
@keyframes highlight {0% {box-shadow: 0 0 0 0 #fff;} 50% {box-shadow: 0 0 10px 0 #fff;} 100% {box-shadow: 0 0 0 0 #fff;}}

/* Text Preview */
#container {position: relative;}
#text {position: absolute; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%,-50%); background-color: #fff; border: 1px solid #eee;}

/* Text Preview - Text Messages */
/*text overlay*/
#sms > div.overlay.textOverlay {display: block;}
#sms > div.overlay.textOverlay div.text {display: none;}
#text.active {z-index: 1001;}
#text.active > div.container {display: flex; align-items: flex-start; /*align-items: flex-end;*/ min-height: 200px; min-width: 450px; background-color: #fff; padding: 20px; position: relative;}
#text.active > div.container a.close {position: absolute; top: 0; right: 0; padding: 5px; cursor: pointer;}
#text.active > div.container ul {list-style-type: none; margin: 0; padding: 0; flex: 1 100%; display: flex; flex-wrap: wrap;}
#text.active > div.container ul > li {display: none;visibility: hidden; overflow: hidden; max-height: 0; padding: 0; max-width: 0; margin: 0 0 20px; border-radius: 6px; flex: 0 100%; transform: scale(.95); transition: transform 300ms ease}
#text.active > div.container ul > li.show {display: block;}
#text.active > div.container ul > li.show.active {visibility: visible; max-height: none; padding: 5px 20px; max-width: 65%; transform: scale(1);}
#text.active > div.container ul > li:not(.show) {margin: 0; padding: 0;}
#text.active > div.container ul > li.from {background-color: #E5E5EA; align-self: flex-start;}
#text.active > div.container ul > li.sent {background-color: #0E86FE; color: #fff;}
/*active messages*/
#text.active > div.container ul > li.active {padding: 5px 20px;}
#text.active > div.container ul > li.from.active {margin-right: auto;}
#text.active > div.container ul > li.sent.active {margin-left: auto;}