css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <section id="progressive-tool-section-1">
  <div class="container-fluid hero-builder">
    <div class="progressive-tool-main-col">
      <h3 class="mobile-view-header">(mobile view)</h3>
      <div id="charting" class="slider-content-box">
        <div id="charting-content" class="hidden-content">
          <div class="hidden-content-text-wrapper">
            <img class="hidden-content-left-column" src="//davidanderson.us/wp-content/uploads/home-page-smart-charting.png">
            <div class="hidden-content-right-column">
              <span>Smart charting</span>
              <br>Minimize data re-entry with shortcuts and a library of customizable templates built by providers like you.
            </div>
            <img class="hidden-content-left-column" src="//davidanderson.us/wp-content/uploads/home-page-charting-favorites.png">
            <div class="hidden-content-right-column">
              <span>Automatic favorite lists</span>
              <br>Reduce the number of keystrokes and clicks in your workday by selecting from a list of frequently used orders throughout the EHR.
            </div>
            <img class="hidden-content-left-column" src="//davidanderson.us/wp-content/uploads/home-page-charting-code-assist.png">
            <div class="hidden-content-right-column">
              <span>Code Assist</span>
              <br>Search for diagnostic criteria using natural language terms and never memorize another code again.
            </div>
          </div>
          <div class="tileLink"><a href="http://www.practicefusion.com/medical-chart-ehr/">Learn more about intuitive charting</a></div>
        </div>


        <div id="charting-slider">
          <div id="charting-title-bar" class="image-title-bar" readonly>
            Intuitive charting that adapts to you
            <br>
            <span>Save time with smart charting features that adapt to your unique workflow.</span>
          </div>
          <img id="charting-control" class="slider-control" src="//davidanderson.us/wp-content/uploads/Caret-down.png">
        </div>
      </div>
      <div class="progressive-tool-right-col">
        <div id="e-prescribing" class="slider-content-box">
          <div id="e-prescribing-content" class="hidden-content">
            <div class="hidden-content-text-wrapper">
              <img class="hidden-content-left-column" src="//davidanderson.us/wp-content/uploads/home-page-e-prescribe-order.png">
              <div class="hidden-content-right-column">
                <span>Order from anywhere</span>
                <br>Cloud-based e-prescribing lets you manage medication orders, refill requests, and pharmacy communication from any location.
              </div>
              <img class="hidden-content-left-column" src="//davidanderson.us/wp-content/uploads/home-page-e-prescribe-send.png">
              <div class="hidden-content-right-column">
                <span>Send to anywhere</span>
                <br>Connect to every e-prescribing enabled pharmacy in the country to quickly fill medication orders electronically.
              </div>
              <img class="hidden-content-left-column" src="//davidanderson.us/wp-content/uploads/home-page-e-prescribe-save.png">
              <div class="hidden-content-right-column">
                <span>Save time</span>
                <br>Submit common orders more efficiently with patient-specific templates and 2-click prescription refills.
              </div>
            </div>
            <div class="tileLink"><a href="http://www.practicefusion.com/electronic-prescribing/">Learn more about e-prescribing</a></div>
          </div>

          <div id="e-prescribing-slider">
            <div class="image-title-bar" readonly>
              e-Prescribe with the system ranked #1 for ease of use
              <br>
              <span>Help your patients get their medication faster.</span>
            </div>
            <img id="e-prescribing-control" class="slider-control" src="//davidanderson.us/wp-content/uploads/Caret-down.png">
          </div>
        </div>

        <div id="front-office" class="slider-content-box">
          <div id="front-office-content" class="hidden-content">
            <div class="hidden-content-text-wrapper">
              <img class="hidden-content-left-column" src="//davidanderson.us/wp-content/uploads/home-page-front-office-appointments.png">
              <div class="hidden-content-right-column">
                <span>Manage appointments</span>
                <br>Reduce no-shows with automatic patient appointment reminders and speed up check-in with online intake forms.
              </div>
              <img class="hidden-content-left-column" src="//davidanderson.us/wp-content/uploads/home-page-front-office-eligibility.png">
              <div class="hidden-content-right-column">
                <span>Automatically check insurance eligibility</span>
                <br>Verify insurance eligibility from your EHR to make sure you get paid for the appointments you schedule.
              </div>
              <img class="hidden-content-left-column" src="//davidanderson.us/wp-content/uploads/home-page-front-office-paperless.png">
              <div class="hidden-content-right-column">
                <span>Go paperless</span>
                <br>Never lose a fax again with the convenience of HIPAA compliant electronic faxing for your referrals and practice documents.
              </div>
            </div>
            <div class="tileLink"><a href="http://www.practicefusion.com/scheduling-ehr/">Learn more about practice management</a></div>
          </div>

          <div id="front-office-slider">
            <div id="front-office-title-bar" class="image-title-bar" readonly>
              Streamline your front office
              <br>
              <span>Simplify your administrative tasks and drive practice revenue.</span>
            </div>
            <img id="front-office-control" class="slider-control" src="//davidanderson.us/wp-content/uploads/Caret-down.png">
          </div>
        </div>

      </div>

    </div>
  </div>
</section>
<section id="progressive-tool-section-2">
  <div class="container-fluid hero-builder">
    <div class="progressive-tool-main-col">
      <div class="progressive-tool-right-col">

        <div id="billing" class="slider-content-box">
          <div id="billing-content" class="hidden-content">
            <div class="two-row-content-text">
              <div>
                <span>Ready for better billing?</span>
                <br>Integrate your EHR with the industry’s most popular and affordable cloud-based billing services.
              </div>
              <div>
                <span>Happy with your biller?</span>
                <br>Use your current billing workflow and print, export, or securely send ICD-10 ready superbills electronically to an external biller.
              </div>
            </div>
            <img src="//davidanderson.us/wp-content/uploads/home-page-billing-billers.png">

            <div class="tileLink"><a href="http://www.practicefusion.com/medical-billing/">Learn more about medical billing</a></div>
          </div>

          <div id="billing-slider">
            <div id="billing-title-bar" class="image-title-bar" readonly>
              Bill the way you want
              <br>
              <span>Get paid faster with our flexible billing options.</span>
            </div>
            <img id="billing-control" class="slider-control" src="//davidanderson.us/wp-content/uploads/Caret-down.png">
          </div>
        </div>

        <div id="support" class="slider-content-box">
          <div id="support-content" class="hidden-content">
            <div class="hidden-content-text-wrapper">
              <img class="hidden-content-left-column" src="//davidanderson.us/wp-content/uploads/home-page-support-live5.png">
              <div class="hidden-content-right-column">
                <span>Get customized implementation</span>
                <br />You’ll be Live in Five<sup>&trade;</sup> with personalized implementation support from our dedicated specialists. We’ll even reach out to you to see how we can help set you up for success.
              </div>
              <img class="hidden-content-left-column" src="//davidanderson.us/wp-content/uploads/home-page-support-phenomenal.png">
              <div class="hidden-content-right-column">
                <span>Experience Phenomenal Support<sup>&reg;</sup></span>
                <br />If you ever do need help, we offer award-winning customer service from a team whose core purpose is dedicated to supporting your practice — all for free.
              </div>
            </div>
            <div class="tileLink"><a href="http://www.practicefusion.com/help/">Learn more about our in-person support</a></div>
          </div>
          <div id="support-slider">
            <div class="image-title-bar" readonly>
              We're here to help
              <br />
              <span>Tailored onboarding and person-to-person support when you need it.</span>
            </div>
            <img id="support-control" class="slider-control" src="//davidanderson.us/wp-content/uploads/Caret-down.png">
          </div>
        </div>
      </div>
      <div class="progressive-tool-right-col">
        <div id="outcomes" class="slider-content-box">
          <div id="outcomes-content" class="hidden-content">
            <div class="hidden-content-text-wrapper">
              <img class="hidden-content-left-column" src="//davidanderson.us/wp-content/uploads/home-page-outcomes-gaps.png">
              <div class="hidden-content-right-column">
                <span>Identify gaps in care</span>
                <br />Automatically track multiple indicators and diagnoses to surface patients who may be at risk.
              </div>
              <img class="hidden-content-left-column" src="//davidanderson.us/wp-content/uploads/home-page-patient-outcomes-2.png">
              <div class="hidden-content-right-column">
                <span>Receive Clinical Decision Support</span>
                <br />Opt in to receive notifications during the patient visit that help identify potential care gaps.
              </div>
              <img class="hidden-content-left-column" src="//davidanderson.us/wp-content/uploads/home-page-patient-outcomes-3.png">
              <div class="hidden-content-right-column">
                <span>Access Performance dashboards</span>
                <br />Measure outcomes and track patient progress across quality reporting programs.
              </div>
            </div>
            <div class="tileLink"><a href="http://www.practicefusion.com/phm/">Learn more about population health management</a></div>
          </div>

          <div id="outcomes-slider">
            <div class="image-title-bar" readonly>
              Improve patient outcomes
              <br>
              <span>Identify at risk patients and reduce gaps in care.</span>
            </div>
            <img id="outcomes-control" class="slider-control" src="//davidanderson.us/wp-content/uploads/Caret-down.png">
          </div>
        </div>

        <div id="labs-imaging" class="slider-content-box">
          <div id="labs-imaging-content" class="hidden-content">
            <img src="//davidanderson.us/wp-content/uploads/home-page-labs-imaging.png">
            <div class="two-row-content-text">
              <div>
                <span>Connect to your labs</span>
                <br>Electronically track order fulfillment and receive structured results with highlighted abnormal values.
              </div>
              <div>
                <span>Connect to your imaging centers</span>
                <br>Order imaging tests directly from a patient’s chart and instantly share results with patients.
              </div>
            </div>
            <div class="tileLink"><a href="http://www.practicefusion.com/lab-imaging-integration/">Learn more about electronic ordering</a></div>
          </div>
          <div id="labs-imaging-slider">
            <div class="image-title-bar" readonly>Access the largest network of labs and imaging centers<br />
              <span>Order from the  most connected platform in healthcare.</span>
            </div>
            <img id="labs-imaging-control" class="slider-control" src="//davidanderson.us/wp-content/uploads/Caret-down.png">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
            
          
!
            
              * {
  box-sizing: border-box;
}

body {
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}

a {
  background: 0 0;
  color: #14a4ec;
  text-decoration: none;
}

img {
  border: 0;
  vertical-align: middle;
}

div,
span {
  -webkit-font-smoothing: antialiased;
}

:after,
:before {
  box-sizing: border-box;
}

#progressive-tool-section-1,
#progressive-tool-section-2 {
  background-color: #f7f7f7;
  border-top: 1px solid #cacaca;
  margin-top: -1px;
  width: 100%;
}

#progressive-tool-section-1 {
  padding-top: 60px;
}

#progressive-tool-section-2 {
  background-color: #f1f1f1;
  padding-bottom: 52px;
  padding-top: 60px;
  margin-bottom: 58px;
}

#progressive-tool-section-1 h2 {
  font-size: 32px;
  margin-bottom: 60px;
}

.progressive-tool-main-col {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 1200px;
}

.progressive-tool-right-col {
  width: 590px;
  display: inline-block;
  margin-right: 5px;
  vertical-align: top;
}

.image-title-bar {
  font-family: 'Open Sans';
  position: absolute;
  bottom: 23px;
  width: 100%;
  padding-left: 30px;
  color: white;
  text-align: left;
  font-size: 21px;
  font-weight: 300;
  line-height: 28px;
}

.active-box-shadow {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);
  background-color: white;
}

.slider-content-box {
  position: relative;
  overflow: hidden;
  box-sizing: content-box;
  width: 590px;
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 10px;
  vertical-align: top;
  transition: box-shadow .35s ease-in-out;
}

.slider-content-box:hover {
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
}

.tileLink {
  line-height: 16px;
}

#charting {
  height: 550px;
  float: none;
}

#e-prescribing,
#front-office,
#billing,
#support,
#outcomes,
#labs-imaging {
  height: 270px;
}

.image-title-bar span {
  font-size: 16px;
  letter-spacing: -.05rem;
}

#charting-title-bar {
  font-size: 28px;
  bottom: 44px;
}

#e-prescribing-slider,
#front-office-slider,
#billing-slider,
#support-slider,
#outcomes-slider,
#labs-imaging-slider {
  width: 590px;
  height: 270px;
}

#charting-slider {
  background-image: url(//davidanderson.us/wp-content/uploads/intuitive-charting-doctor.jpg);
  width: 590px;
  height: 550px;
}

#e-prescribing-slider {
  background-image: url(//davidanderson.us/wp-content/uploads/home-page-e-prescribing.jpg);
}

#front-office-slider {
  background-image: url(//davidanderson.us/wp-content/uploads/home-page-front-office.jpg);
}

#billing-slider {
  background-image: url(//davidanderson.us/wp-content/uploads/home-page-billing.jpg);
}

#support-slider {
  background-image: url(//davidanderson.us/wp-content/uploads/home-page-support.jpg);
}

#outcomes-slider {
  background-image: url(//davidanderson.us/wp-content/uploads/home-page-outcomes.jpg);
}

#labs-imaging-slider {
  background-image: url(//davidanderson.us/wp-content/uploads/home-page-labs-imaging.jpg);
}

#charting-content {
  visibility: hidden;
}

#e-prescribing-content {
  visibility: hidden;
}

#front-office-content {
  visibility: hidden;
}

#billing-content {
  visibility: hidden;
}

#support-content {
  visibility: hidden;
}

#outcomes-content {
  visibility: hidden;
}

#labs-imaging-content {
  visibility: hidden;
}

#billing-content img {
  margin-bottom: 26px;
}

#support-content .tileLink {
  margin-top: 13px;
}

#labs-imaging-content img {
  margin-bottom: 25px;
}

#labs-imaging-content .two-row-content-text {
  margin-bottom: 21px;
}

.two-row-content-text {
  margin-bottom: 26px;
}

.two-row-content-text div {
  width: 220px;
  display: inline-block;
  font-size: 16px;
  line-height: 20px;
  vertical-align: top;
}

.two-row-content-text div:first-of-type {
  margin-right: 30px;
}

.two-row-content-text span {
  font-weight: 400;
}

.slider-control {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 17px;
  height: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out 0s;
}

.hidden-content {
  width: 590px;
  margin-right: 10px;
  padding: 30px;
  font-family: 'Source Sans Pro';
  text-align: left;
  font-size: 16px;
  line-height: 28px;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  background: white;
  margin-top: 105px;
}

.hidden-content-left-column {
  width: 150px;
  margin-right: 30px;
  margin-bottom: 30px;
  display: inline-block;
}

.hidden-content-left-column img {
  vertical-align: initial;
}

.hidden-content-text-wrapper img:last-of-type {
  margin-bottom: 25px;
}

.hidden-content-right-column {
  width: 330px;
  display: inline-block;
  vertical-align: top;
  line-height: 20px;
  margin-top: 4px;
}

.hidden-content-right-column span {
  font-weight: 400;
}

.hidden-content a {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 400;
}

.slide-content span {
  font-weight: normal;
  font-size: 16px;
}

.mobile-view-header {
  display: none;
}

@media (max-width:767px) {
  .col-sm-10 {
    padding-left: 10px;
    padding-right: 10px;
  }
  .progressive-tool-main-col {
    max-width: 320px;
  }
  .progressive-tool-right-col {
    width: 300px;
  }
  .hidden-content {
    width: 300px;
    padding: 20px;
    padding-top: 11px;
  }
  #charting-content-open:nth-child(3) {
    margin-bottom: 30px;
  }
  #e-prescribing,
  #front-office,
  #billing,
  #support,
  #outcomes,
  #labs-imaging {
    height: 185px;
  }
  .hidden-content-left-column {
    display: none;
    float: none;
  }
  .hidden-content-right-column {
    width: 260px;
  }
  .hidden-content-text-wrapper {}
  .hidden-content-text-wrapper div {
    margin-bottom: 8px;
  }
  .hidden-content-text-wrapper div:last-of-type {
    margin-bottom: 22px;
  }
  .slider-content-box {
    margin-right: 0px;
    width: 300px;
  }
  .progressive-tool-right-col {
    margin-right: 0px;
  }
  #progressive-tool-section-1 {
    padding-top: 34px;
  }
  #progressive-tool-section-2 {
    padding-top: 30px;
  }
  #progressive-tool-section-1 h2 {
    font-size: 22px;
    margin-bottom: 24px;
  }
  .image-title-bar {
    font-size: 18px;
    padding: 0px 20px;
    top: 109px;
  }
  .image-title-bar span {
    display: none;
  }
  #charting-title-bar {
    font-size: 18px;
    bottom: 23px;
  }
  #charting {
    height: 185px;
  }
  #charting-slider,
  #e-prescribing-slider,
  #front-office-slider,
  #billing-slider,
  #support-slider,
  #outcomes-slider,
  #labs-imaging-slider {
    width: 300px;
    height: 185px;
    background-size: cover;
  }
  #charting-slider {
    background-image: url("//davidanderson.us/wp-content/uploads/home-page-charting-mobile@2x.jpg");
  }
  #e-prescribing-slider {
    background-image: url("//davidanderson.us/wp-content/uploads/home-page-e-prescribing-mobile@2x.jpg");
  }
  #front-office-slider {
    background-image: url("//davidanderson.us/wp-content/uploads/home-page-front-office-mobile@2x.jpg");
  }
  #billing-slider {
    background-image: url("//davidanderson.us/wp-content/uploads/home-page-billing-mobile@2x.jpg");
  }
  #support-slider {
    background-image: url("//davidanderson.us/wp-content/uploads/home-page-support-mobile@2x.jpg");
  }
  #outcomes-slider {
    background-image: url("//davidanderson.us/wp-content/uploads/home-page-outcomes-mobile@2x.jpg");
  }
  #labs-imaging-slider {
    background-image: url("//davidanderson.us/wp-content/uploads/home-page-labs-imaging-mobile@2x.jpg");
  }
  #billing-content img,
  #labs-imaging-content img {
    display: none;
  }
  .two-row-content-text {
    margin-bottom: 22px;
  }
  .two-row-content-text div {
    width: 260px;
    display: block;
  }
  .two-row-content-text div:first-of-type {
    margin-right: 0px;
    margin-bottom: 11px;
  }
  #support-content .tileLink {
    margin-top: 0px;
  }
  #progressive-tool-section-2 {
    margin-bottom: 40px;
  }
  .mobile-view-header {
    display: block;
    margin-bottom: 20px;
    color: #8c8c8c;
    font-family: 'Open Sans'
  }
}
            
          
!
            
              var Tile = {
  tileName: '',

  get $tileEl() {
    return jQuery('#' + this.tileName);
  },
  get $tileSliderEl() {
    return jQuery('#' + this.tileName + '-slider');
  },
  get $tileContentEl() {
    return jQuery('#' + this.tileName + '-content');
  },
  get $tileTitleBarEl() {
    return jQuery('#' + this.tileName + '-title-bar');
  },
  get $tileControlEl() {
    return jQuery('#' + this.tileName + '-control');
  },
  get tileSliderOpenClass() {
    return this.tileName + '-open';
  },
  get tileSliderCloseClass() {
    return this.tileName + '-close';
  },
  get tileContentOpenClass() {
    return this.tileName + '-content-open';
  },
  get tileContentCloseClass() {
    return this.tileName + '-content-close';
  },

  openState: false,
  closedHeight: '270px',
  openHeight: '',
  closedHeightMobile: '185px',
  openHeightMobile: '',
  sliderStartY: '',
  sliderEndY: '',
  sliderStaticYMobile: '',
  contentStartY: '-303px',
  contentEndY: '0px',
  contentStartYMobile: '-303px',
  contentEndYMobile: '80px',
  titleBarBottom: '23px',
  titleBarBottomMobile: '23px',
  animationDuration: '.25s',
  mediaBreakPoint: '767px',

  handleClick: function() {

    if (this.openState === true) {

      if (!checkForMobile()) {
        this.$tileEl.removeClass('active-box-shadow').animate({
          height: this.closedHeight
        }, 250);
        this.$tileSliderEl.removeClass(this.tileSliderOpenClass);
        this.$tileSliderEl.addClass(this.tileSliderCloseClass).css('transform', 'translateY(' + this.sliderStartY + ')');
        this.$tileContentEl.addClass(this.tileContentCloseClass).css('transform', 'translateY(' + this.contentStartY + ')').css('visibility', 'hidden');
        this.$tileTitleBarEl.css('bottom', this.titleBarBottom);
      } else {
        this.$tileEl.removeClass('active-box-shadow').css('height', this.closedHeightMobile);
        this.$tileContentEl.addClass(this.tileContentCloseClass).css('transform', 'translateY(' + this.contentStartYMobile + ')').css('visibility', 'hidden');
        this.$tileTitleBarEl.css('bottom', this.titleBarBottomMobile);
      }

      this.$tileContentEl.removeClass(this.tileContentOpenClass);
      this.$tileContentEl.addClass(this.tileContentCloseClass);
      this.$tileControlEl.attr('src', 'http://www.digitalartsdesign.net/wp-content/uploads/2016/05/Caret-down.png');
      this.openState = false;

    } else {

      if (!checkForMobile()) {
        this.$tileEl.addClass('active-box-shadow').animate({
          height: this.openHeight
        }, 250);
        this.$tileSliderEl.removeClass(this.tileSliderCloseClass);
        this.$tileSliderEl.addClass(this.tileSliderOpenClass).css('transform', 'translateY(' + this.sliderEndY + ')');
        this.$tileContentEl.addClass(this.tileContentCloseClass).css('transform', 'translateY(' + this.contentEndY + ')').css('visibility', 'visible');
        this.$tileTitleBarEl.css('bottom', this.titleBarBottomMobile);
      } else {
        this.$tileEl.addClass('active-box-shadow').css('height', this.openHeightMobile);
        this.$tileContentEl.addClass(this.tileContentCloseClass).css('transform', 'translateY(' + this.contentEndYMobile + ')').css('visibility', 'visible');
        this.$tileTitleBarEl.css('bottom', this.titleBarBottomMobile);
      }
      this.$tileContentEl.removeClass(this.tileContentCloseClass);
      this.$tileContentEl.addClass(this.tileContentOpenClass);
      this.$tileControlEl.attr('src', 'http://www.digitalartsdesign.net/wp-content/uploads/2016/05/Caret-up.png');
      this.openState = true;
    }

  },
  writeAnimationStyleTag: function() {
    var css = '#' + this.tileName + '-slider {-webkit-transform: translateY(' + this.sliderStartY + ');transform: translateY(' + this.sliderStartY + ');cursor: pointer;}.' + this.tileName + '-open {-webkit-animation-name: ' + this.tileName + '-open-animation;-webkit-animation-duration: ' + this.animationDuration + ';animation-name: ' + this.tileName + '-open-animation;animation-duration: ' + this.animationDuration + ';}@-webkit-keyframes ' + this.tileName + '-open-animation {0% {-webkit-transform: translateY(' + this.sliderStartY + ');transform: translateY(' + this.sliderStartY + ');}100% {-webkit-transform: translateY(' + this.sliderEndY + ');transform: translateY(' + this.sliderEndY + ');}}@keyframes ' + this.tileName + '-open-animation {0% {-webkit-transform: translateY(' + this.sliderStartY + ');transform: translateY(' + this.sliderStartY + ');}100% {-webkit-transform: translateY(' + this.sliderEndY + ');transform: translateY(' + this.sliderEndY + ');}}.' + this.tileName + '-close {-webkit-animation-name: ' + this.tileName + '-close-animation;-webkit-animation-duration: ' + this.animationDuration + ';animation-name: ' + this.tileName + '-close-animation;animation-duration: ' + this.animationDuration + ';}@-webkit-keyframes ' + this.tileName + '-close-animation {0% {transform: translateY(' + this.sliderEndY + ')}100% {transform: translateY(' + this.sliderStartY + ')}}@keyframes ' + this.tileName + '-close-animation {0% {transform: translateY(' + this.sliderEndY + ')}100% {transform: translateY(' + this.sliderStartY + ')}}.' + this.tileName + '-content-open {-webkit-animation-name: ' + this.tileName + '-content-open-animation;-webkit-animation-duration: ' + this.animationDuration + ';animation-name: ' + this.tileName + '-content-open-animation;animation-duration: ' + this.animationDuration + ';}@-webkit-keyframes ' + this.tileName + '-content-open-animation {0% {transform: translateY(' + this.contentStartY + ')}100% {transform: translateY(' + this.contentEndY + ')}} @keyframes ' + this.tileName + '-content-open-animation {0% {transform: translateY(' + this.contentStartY + ')}100% {transform: translateY(' + this.contentEndY + ')}}@media only screen and (max-width:' + this.mediaBreakPoint + ') {#' + this.tileName + '-slider {-webkit-transform: translateY(' + this.sliderStaticYMobile + ');transform: translateY(' + this.sliderStaticYMobile + ');}}',
      head = document.head || document.getElementsByTagName('head')[0],
      style = document.createElement('style');
    style.type = 'text/css';
    style.id = this.tileName + '-animation-styles';
    if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }
    head.appendChild(style);
  }
}

function closeOpenTile(clickedTileObj) {
  var objectList = [chartingObj, ePrescribingObj, frontOfficeObj, billingObj, supportObj, outcomesObj, labsImagingObj];
  var arrayLength = objectList.length;
  for (var i = 0; i < arrayLength; i++) {
    var tileObj = objectList[i];
    if (tileObj !== clickedTileObj) {
      if (tileObj.openState === true) {
        tileObj.handleClick();
      }
    }
  }
}

var chartingObj = Object.create(Tile);
chartingObj.tileName = 'charting';
chartingObj.closedHeight = '550px';
chartingObj.openHeight = '585px';
chartingObj.openHeightMobile = '550px';
chartingObj.sliderStartY = '-588px';
chartingObj.sliderEndY = '-1029px';
chartingObj.sliderStaticYMobile = '-463px';
chartingObj.titleBarBottom = '44px';
chartingObj.titleBarBottomMobile = '22px';
chartingObj.writeAnimationStyleTag();

var ePrescribingObj = Object.create(Tile);
ePrescribingObj.tileName = 'e-prescribing';
ePrescribingObj.openHeight = '561px';
ePrescribingObj.openHeightMobile = '549px';
ePrescribingObj.sliderStartY = '-564px';
ePrescribingObj.sliderEndY = '-730px';
ePrescribingObj.sliderStaticYMobile = '-463px';
ePrescribingObj.writeAnimationStyleTag();

var frontOfficeObj = Object.create(Tile);
frontOfficeObj.tileName = 'front-office';
frontOfficeObj.openHeight = '587px';
frontOfficeObj.openHeightMobile = '606px';
frontOfficeObj.sliderStartY = '-590px';
frontOfficeObj.sliderEndY = '-756px';
frontOfficeObj.sliderStaticYMobile = '-520px';
frontOfficeObj.writeAnimationStyleTag();

var billingObj = Object.create(Tile);
billingObj.tileName = 'billing';
billingObj.openHeight = '394px';
billingObj.openHeightMobile = '457px';
billingObj.sliderStartY = '-403px';
billingObj.sliderEndY = '-568px';
billingObj.sliderStaticYMobile = '-366px';
billingObj.contentEndYMobile = '84px';
billingObj.writeAnimationStyleTag();

var supportObj = Object.create(Tile);
supportObj.tileName = 'support';
supportObj.openHeight = '461px';
supportObj.openHeightMobile = '535px';
supportObj.sliderStartY = '-464px';
supportObj.sliderEndY = '-630px';
supportObj.sliderStaticYMobile = '-448px';
supportObj.writeAnimationStyleTag();

var outcomesObj = Object.create(Tile);
outcomesObj.tileName = 'outcomes';
outcomesObj.openHeight = '586px';
outcomesObj.openHeightMobile = '547px';
outcomesObj.sliderStartY = '-588px';
outcomesObj.sliderEndY = '-754px';
outcomesObj.sliderStaticYMobile = '-460px';
outcomesObj.writeAnimationStyleTag();

var labsImagingObj = Object.create(Tile);
labsImagingObj.tileName = 'labs-imaging';
labsImagingObj.openHeight = '571px';
labsImagingObj.openHeightMobile = '452px';
labsImagingObj.sliderStartY = '-573px';
labsImagingObj.sliderEndY = '-739px';
labsImagingObj.sliderStaticYMobile = '-362px';
labsImagingObj.contentEndYMobile = '83px';
labsImagingObj.writeAnimationStyleTag();

jQuery('#charting-slider').click(function() {
  closeOpenTile(chartingObj);
  chartingObj.handleClick();
});
jQuery('#charting-slider').mouseenter(function() {
  if (!supportsTouch) {
    jQuery('#charting-control').css("transform", "rotate(180deg)");
  }
});
jQuery('#charting-slider').mouseleave(function() {
  if (!supportsTouch) {
    jQuery('#charting-control').css("transform", "rotate(0deg)");
  }
});

jQuery('#e-prescribing-slider').click(function() {
  closeOpenTile(ePrescribingObj);
  ePrescribingObj.handleClick();
});
jQuery('#e-prescribing-slider').mouseenter(function() {
  if (!supportsTouch) {
    jQuery('#e-prescribing-control').css("transform", "rotate(180deg)");
  }
});
jQuery('#e-prescribing-slider').mouseleave(function() {
  if (!supportsTouch) {
    jQuery('#e-prescribing-control').css("transform", "rotate(0deg)");
  }
});

jQuery('#front-office-slider').click(function() {
  closeOpenTile(frontOfficeObj);
  frontOfficeObj.handleClick();
});
jQuery('#front-office-slider').mouseenter(function() {
  if (!supportsTouch) {
    jQuery('#front-office-control').css("transform", "rotate(180deg)");
  }
});
jQuery('#front-office-slider').mouseleave(function() {
  if (!supportsTouch) {
    jQuery('#front-office-control').css("transform", "rotate(0deg)");
  }
});

jQuery('#billing-slider').click(function() {
  closeOpenTile(billingObj);
  billingObj.handleClick();
});
jQuery('#billing-slider').mouseenter(function() {
  if (!supportsTouch) {
    jQuery('#billing-control').css("transform", "rotate(180deg)");
  }
});
jQuery('#billing-slider').mouseleave(function() {
  if (!supportsTouch) {
    jQuery('#billing-control').css("transform", "rotate(0deg)");
  }
});

jQuery('#outcomes-slider').click(function() {
  closeOpenTile(outcomesObj);
  outcomesObj.handleClick();
});
jQuery('#outcomes-slider').mouseenter(function() {
  if (!supportsTouch) {
    jQuery('#outcomes-control').css("transform", "rotate(180deg)");
  }
});
jQuery('#outcomes-slider').mouseleave(function() {
  if (!supportsTouch) {
    jQuery('#outcomes-control').css("transform", "rotate(0deg)");
  }
});

jQuery('#support-slider').click(function() {
  closeOpenTile(supportObj);
  supportObj.handleClick();
});
jQuery('#support-slider').mouseenter(function() {
  if (!supportsTouch) {
    jQuery('#support-control').css("transform", "rotate(180deg)");
  }
});
jQuery('#support-slider').mouseleave(function() {
  if (!supportsTouch) {
    jQuery('#support-control').css("transform", "rotate(0deg)");
  }
});

jQuery('#labs-imaging-slider').click(function() {
  closeOpenTile(labsImagingObj);
  labsImagingObj.handleClick();
});
jQuery('#labs-imaging-slider').mouseenter(function() {
  if (!supportsTouch) {
    jQuery('#labs-imaging-control').css("transform", "rotate(180deg)");
  }
});
jQuery('#labs-imaging-slider').mouseleave(function() {
  if (!supportsTouch) {
    jQuery('#labs-imaging-control').css("transform", "rotate(0deg)");
  }
});

var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;

function checkForMobile() {
  if (jQuery('.slider-content-box').css('width') === '300px') {
    return true;
  }
}

enquire.register("(max-width: 767px)", {

  match: function() {
    var objectList = [chartingObj, ePrescribingObj, frontOfficeObj, billingObj, supportObj, outcomesObj, labsImagingObj];
    var arrayLength = objectList.length;
    for (var i = 0; i < arrayLength; i++) {
      var tileObj = objectList[i];
      tileObj.$tileEl.removeClass('active-box-shadow').css('height', tileObj.closedHeightMobile);
      tileObj.$tileContentEl.addClass(tileObj.tileContentCloseClass).css('transform', 'translateY(' + tileObj.contentStartYMobile + ')').css('visibility', 'hidden');
      tileObj.$tileSliderEl.addClass(tileObj.tileSliderCloseClass).css('transform', 'translateY(' + tileObj.sliderStaticYMobile + ')');
      tileObj.$tileTitleBarEl.css('bottom', tileObj.titleBarBottomMobile);

      tileObj.$tileContentEl.removeClass(tileObj.tileContentOpenClass);
      tileObj.$tileContentEl.addClass(tileObj.tileContentCloseClass);
      tileObj.$tileControlEl.attr('src', 'http://www.digitalartsdesign.net/wp-content/uploads/2016/05/Caret-down.png');
      tileObj.openState = false;
    }
  },
  unmatch: function() {
    var objectList = [chartingObj, ePrescribingObj, frontOfficeObj, billingObj, supportObj, outcomesObj, labsImagingObj];
    var arrayLength = objectList.length;
    for (var i = 0; i < arrayLength; i++) {
      var tileObj = objectList[i];
      tileObj.$tileEl.removeClass('active-box-shadow').animate({
        height: tileObj.closedHeight
      }, 250);
      tileObj.$tileSliderEl.removeClass(tileObj.tileSliderOpenClass);
      tileObj.$tileSliderEl.addClass(tileObj.tileSliderCloseClass).css('transform', 'translateY(' + tileObj.sliderStartY + ')');
      tileObj.$tileContentEl.addClass(tileObj.tileContentCloseClass).css('transform', 'translateY(' + tileObj.contentStartY + ')').css('visibility', 'hidden');
      tileObj.$tileTitleBarEl.css('bottom', tileObj.titleBarBottom);

      tileObj.$tileContentEl.removeClass(tileObj.tileContentOpenClass);
      tileObj.$tileContentEl.addClass(tileObj.tileContentCloseClass);
      tileObj.$tileControlEl.attr('src', 'http://www.digitalartsdesign.net/wp-content/uploads/2016/05/Caret-down.png');
      tileObj.openState = false;
    }
  }
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console