Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  <div class="container contentContainer">
            <div id="pTwoRowOne">
                <div class="row">
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 row row-centered">
                        <h4 id="bio" class="selected">Biology</h4>
                    </div>
                </div>
            </div>
            <div id="pTwoRowTwo">
                <div class="row">
                    <div class="row col-md-6">
                        <h3 id="major" class="col-md-12 row row-centered">Select a major from above</h3>
                        <h3 id="majorRep" class="col-md-12 row row-centered"></h3>
                        <p id="jobs" class="col-md-12 selectedTwo"></p>
                        <p id="skills"class="col-md-12"></p>
                        <p id="salaryRange" class="col-md-12"></p>
                        <p id="salaryRangeOC" class="col-md-12"></p>
                        <p id="salaryAvg" class="col-md-12"></p>
                    </div>
                </div>
            </div>
        </div>
  
</body>
</html>
 
h4 {
        border: 1px solid black;
        border-radius: 8px;
        padding: 10px 2px 10px 2px;
        margin: 20px 20px 0px 20px;
        background-color: #F0F0F0;
        border-color: #F8F8F8;
        color: #505050;
        cursor: pointer;
    }
    
    .active {
        background-color: #99E6FF;
    }
    
    p {
        font-size: 1.3em;
    }
 
var H4 = document.getElementsByClassName("selected"), act;
    [].forEach.call(H4, function(el){
        el.addEventListener("click", function(){
           if(act) act.classList.remove("active");
           return (this.classList.toggle("active"), act=this);
        });
    });
    var bioArray = [
        "Biology",
        ['Common Job Titles: Biological/Lab Technician',' Medical and Health Services Manager',' Genetic Counselor'],
        "Skills in Demand: Relevant Certifications and Degree Programs Required",
        "Major Salary Range: $35,000 to $120,000 +",
        "Occupation Salary Range: Select a Job Title",
        "Average Salary: Select a Job Title"
        
    ];
    
        document.getElementById("bio").onclick=function() {
        document.getElementById("majorRep").innerHTML = bioArray[0];
        document.getElementById("jobs").innerHTML = bioArray[1];
        document.getElementById("skills").innerHTML = bioArray[2];
        document.getElementById("salaryRange").innerHTML = bioArray[3];
        document.getElementById("salaryRangeOC").innerHTML = bioArray[4];
        document.getElementById("salaryAvg").innerHTML = bioArray[5];
    }
    
    var geneticCounselor = [
        "Occupation Salary Range: $45,000 to $90,000",
        "Average Salary: $57,000"
    ];
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers