pss tabbed proto

by Rich Costello

HTML

<section>
<p>Unrelated text is here. Text in this area is static and should display at all times.</p>

<ul id="tabs">
    <li><a href="#">Nurses</a>
    </li>
    <li><a href="#">Clinicians</a>
    </li>
    <li><a href="#">It Departments</a>
    </li>
</ul>
<div id="tabs-container-0">
    <div id="content1">This is the text that Will Go into the NURSES Section</div>
    <div id="content2">This is the text that Will Go into the CLINICIANS Section</div>
    <div id="content3">This is the text that Will Go into the IT DEPT Section</div>
</div>

<div id="tabs-container-2">
    <div id="content2-1">Download the datasheet. SMARTER SYSTEMS, SAFER PATIENTS</div>
    <div id="content2-2">Three Keys to UNIFYING Communication and Workflow in your Hospital</div>
<div id="content2-3">
Experience the power and the simplicity.REquest a patient Touch demo
</div>   
</div>

<div id="tabs-container-3">
    <div id="content3-1">GET DATA SHEET</div>
    <div id="content3-2">Get WHITEPAPER</div>
<div id="content3-3">
Request A Demo
</div>   
</div>
<div id="tabs-container-4">
    <div id="content4-1" style="background-image: url(https://www.cstatic-images.com/car-pictures/main/USC60CHC021A021001.png)">PIC NURSES</div>
    <div id="content4-2" style="background-image: url(http://cdn.cnn.com/cnnnext/dam/assets/161212145759-best-cars-2016-bugatti-1-super-169.jpg)">PIC CLINICIANS</div>
<div id="content4-3" style="background-image: url(https://www.cstatic-images.com/car-pictures/main/CAC70AUC171A021001.png)">PIC IT DEPT
</div>   
</div>

</section>

CSS

#content4-3,#content4-2,#content4-1 {
  display:block;
  width:100px;
  height:100px;
}

JavaScript

$(function () {
    $('#tabs-container-0 div').hide().eq(0).show();
    $('#tabs-container-2 div').hide().eq(0).show();
    $('#tabs-container-3 div').hide().eq(0).show();
     $('#tabs-container-4 div').hide().eq(0).show();
   
    $('#tabs li').click(function () {
        $('#tabs-container-0 div').hide()
        $('#tabs-container-2 div').hide()
        $('#tabs-container-3 div').hide()
        $('#tabs-container-4 div').hide()
        
        num = $('#tabs li').index(this);
        $('#tabs-container-0 div').hide().eq(num).show();
        $('#tabs-container-2 div').hide().eq(num).show();
        $('#tabs-container-3 div').hide().eq(num).show();
        $('#tabs-container-4 div').hide().eq(num).show();
    });
});