Feature for Goldfinger

feature-for-goldfinger.markdown

Feature for Goldfinger

A Pen by Chase Harrison on CodePen.

License.

index.html

<div id="tabSlider">
<div class="slideLeft">
<h3>Website Must-Haves</h3>
<ul>
<li><a href="#" onClick="return false;">Security</a></li>
<li><a href="#" onClick="return false;">Simple Website Editing</a></li>
<li><a href="#" onClick="return false;">Responsive Design and SEO</a></li>
<li><a href="#" onClick="return false;">Ongoing Online Presence Management</a></li>
<li><a href="#" onClick="return false;">Online Reputation Management</a></li>
<li><a href="#" onClick="return false;">Custom Forms and More</a></li>
</ul>
</div>

<div class="slideRight">
<div class="slide">
<h3>Security</h3>
<p>Our SSL certificate provides a layer of security and protection across your entire website. Whether filling out an online form, requesting an appointment, or making a payment online, your patients will feel confident knowing that they have a secure connection with your website.</p>
</div>

<div class="slide">
<h3>Simple Website Editing</h3>
<p>Keeping your website updated is stress-free with user-friendly editing tools, such as drag and drop page elements and in-line editing. Plus, we have multiple options so you can have a constant flow of fresh content that will improve your search engine optimization ranking and encourage patients to routinely visit your website.</p>
</div>

<div class="slide">
<h3>Responsive Design and SEO</h3>
<p>A responsive, mobile-friendly website design is a must. West’s medical and dental websites give all visitors an optimal viewing and user experience, regardless of screen size, and our websites are already primed for search engine visibility. </p>
</div>

<div class="slide">
<h3>Ongoing Online Presence Management</h3>
<p>West is proud to offer our clients best-in-class online presence management services through a partnership with Wpromote, one of the leading online marketing companies in the country. Wpromote can work with practice owners and CEOs to coordinate all of your marketing strategies and optimize the reach and success of your marketing campaigns.</p>
</div>

<div class="slide">
<h3>Online Reputation Management</h3>
<p>Patients are online looking for information about you and your practice, so it’s important that your happy patients leave reviews. TeleVox Solutions such as Doctor Reviews and online presence management help healthcare providers create a positive reputation and strong online presence.</p>
</div>

<div class="slide">
<h3>Custom Forms and More</h3>
<p>Add forms to your website by choosing from templates such as Rx Refill Requests or Medical History, or create your own forms with our easy form builder. Stand out from the competition with a practice blog, custom surveys, an integrated event calendar and more.</p>
</div>
</div>
</div>

script.js

$(document).ready(function() {
  // Page Load
  var mainElem = $("#tabSlider"), n;
  mainElem.find(".slideRight .slide").each(function(){
    n = $(this).find("h3").text().toLowerCase();
    $(this).attr("data-slide", n)
  });
  mainElem.find(".slideLeft a").each(function(){
    n = $(this).text().toLowerCase();
    $(this).attr("data-toggle", n);
  });
  mainElem.find(".slideLeft a").eq(0).addClass("active");
  mainElem.find(".slideRight .slide").eq(0).show().addClass("active");
  // On Click
  mainElem.find("a[data-toggle]").on("click", function(){
    mainElem.find("a[data-toggle], .slideRight .slide").removeClass("active");
    mainElem.find(".slideRight .slide").hide();
    $(this).addClass("active");
    mainElem.find(".slideRight .slide").eq($(this).parent().index()).show().addClass("active")
  });
});

scripts

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

style.css

#tabSlider {display: flex; flex-wrap: nowrap;}
#tabSlider > div.slideLeft {flex: 1 25%;}
#tabSlider > div.slideRight {flex: 1 75%;}
#tabSlider > div.slideRight > div.slide {display: none;}