Edit in JSFiddle

       //Store a function that loops through each service list item and hides it
       function hideSkills() {
         for (var i = 0; i < document.getElementsByClassName("skill-description").length; i++) {
           document.getElementsByClassName("skill-description")[i].style.display = "none";
         };
       };

       //On page load, hide all the service descriptions...
       hideSkills();

       //...Except the first
       document.getElementsByClassName("skill-description")[0].style.display = "block";

       //Store a function that deactivates service headlines
       function deactivate() {
         document.getElementById("skill-h-1").className = "inactive-h3";
         document.getElementById("skill-h-2").className = "inactive-h3";
         document.getElementById("skill-h-3").className = "inactive-h3";
       };

       //Collect IDs into an iterable array
       var headlineArray = [
         "skill-h-1", //equal to headlineArray[0]
         "skill-h-2", //equal to headlineArray[1]
         "skill-h-3", //equal to headlineArray[2]
       ];

       //Go through each headline one at a time
       for (var i = 0; i < headlineArray.length; i++) {
         //Listen for a click on each headline
         document.getElementById(headlineArray[i]).addEventListener("click", function() {
           //If ANY of the headlines are clicked, hide ALL
           hideSkills();
           deactivate();
           //Record the ID of the clicked icon
           var headlineClicked = this.getAttribute("id");

           //Test which headline was clicked and only display the clicked headline's matching description
           if (headlineClicked == "skill-h-1") {
             document.getElementById("skill-h-1").className = "active-h3";
             document.getElementById("skill-description-1").style.display = "block";
             document.getElementsByTagName("h3")[0].style.color = "#fff";
           } else if (headlineClicked == "skill-h-2") {
             document.getElementById("skill-h-2").className = "active-h3";
             document.getElementById("skill-description-2").style.display = "block";
             document.getElementsByTagName("h3")[1].style.color = "#fff";
           } else if (headlineClicked == "skill-h-3") {
             document.getElementById("skill-h-3").className = "active-h3";
             document.getElementById("skill-description-3").style.display = "block";
             document.getElementsByTagName("h3")[2].style.color = "#fff";
           } else {
             console.log("No headline was clicked.");
           };
         }, false);
       };
<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Show and Hide Interactive Web Content with Java Script in 20 Minutes | Lara Lee Design</title>
  </head>

  <body>
    <article>
      <div class="container">
        <div class="row">
          <div class="column col-50" id="skill-name-nav">
            <h2>Skills:</h2>
            <h3 id="skill-h-1" class="active-h3"><a href="#digital-strategy"><em>01</em> Digital Strategy</a></h3>
            <hr />
            <h3 id="skill-h-2" class="inactive-h3"><a href="#art-direction"><em>02</em> Art Direction</a></h3>
            <hr />
            <h3 id="skill-h-3" class="inactive-h3"><a href="#creative-design"><em>03</em> Creative Design</a></h3>
            <hr />
          </div><!-- ./col-50 -->
          <div class="column col-50" id="skill-description-list">
            <div id="skill-description-1" class="skill-description">
              <h2 class="eyebrow-h2">Digital Strategy:</h2>
              <hr /> <span class="quote">Hope is not a strategy.</span>
              <div class="spacer"></div> I address digital needs with creative solutions that work for any timeline and budget. A thorough investigation begins every project to give you research-backed solutions uniquely fitted to your precise needs.
            </div>
            <div id="skill-description-2" class="skill-description">
              <h2 class="eyebrow-h2">Art Direction:</h2>
              <hr /> <span class="quote">The purpose of design is to inform and delight.*</span>
              <div class="spacer"></div> I invent the vision and follow-though on its execution. Creative briefs, branding, peer and competitor analysis, and proven industry best practices all inform my designs for results that grow with you.
              <div class="spacer"></div> <small>*Milton Glaser, the famous designer behind I♥NY, reflects on Horace</small>
            </div>
            <div id="skill-description-3" class="skill-description">
              <h2 class="eyebrow-h2">Creative Design:</h2>
              <hr /> <span class="quote">Brilliant display, the smart way.</span>
              <div class="spacer"></div> I create digital assets with graphic and web design, web development, and motion graphics. I thrive staring at a blank paper and love embedding visual language into my work to tell your story.
            </div>
          </div><!-- ./col-50 -->
        </div><!-- ./row -->
      </div><!-- ./container -->
    </article>
  </body>

</html>
       body {
         font-family: "Montserrat", "Trebuchet MS", Helvetica, sans-serif;
         font-weight: 500;
         color: #6b7070;
       }

       article {
         width: 100%;
         max-width: 1080px;
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
         margin-right: auto;
         margin-left: auto;
         position: relative;
         box-sizing: border-box;
         padding: 20px;
       }

       .row {
         width: 100%;
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
       }

       .col-50 {
         width: 50%;
       }

       .spacer {
         display: block;
         height: 30px;
       }

       .column:first-child {
         background: #eb3b25;
         padding: 60px;
         position: relative;
         box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
       }

       #skill-name-nav {
         text-align: center;
       }

       #skill-name-nav h2 {
         text-align: center;
         margin-bottom: 40px;
         font-size: 12px;
         font-family: Montserrat;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: .1em;
         color: #fff;
       }

       #skill-name-nav h3,
       #skill-name-nav .inactive-h3 {
         font-family: "Playfair Display", "Times Bold", Times, "Times New Roman Bold", "Times New Roman", serif;
         font-weight: 800 !important;
         margin-bottom: 60px;
         font-size: 28px;
         text-align: center;
         position: relative;
         bottom: 0;
         color: rgba(255, 255, 255, .5);
         transition: .5s ease all;
       }

       #skill-name-nav h3 em {
         font-size: 20px;
         position: relative;
         bottom: 4px;
       }

       #skill-name-nav a {
         font-weight: 800;
         box-shadow: none;
         text-decoration: none;
         color: rgba(255, 255, 255, 1);
       }

       #skill-name-nav .active-h3,
       #skill-name-nav .active-h3 a {
         color: rgba(255, 255, 255, 1);
       }

       #skill-name-nav .inactive-h3 a {
         color: rgba(255, 255, 255, .5);
       }

       #skill-name-nav h3:hover,
       #skill-name-nav h3:active,
       #skill-name-nav h3:focus,
       #skill-name-nav .active-h3 {
         bottom: 10px;
         color: rgba(255, 255, 255, 1.0);
         text-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
       }

       #skill-name-nav .active-h3:before {
         content: "\2014  ";
         color: rgba(255, 255, 255, 1.0);
         font-weight: normal;
       }

       #skill-name-nav .active-h3:after {
         content: " \2014";
         color: rgba(255, 255, 255, 1.0);
         font-weight: normal;
       }

       #skill-name-nav h3:hover a,
       #skill-name-nav h3:active a,
       #skill-name-nav h3:focus a,
       #skill-name-nav .active-h3 a {
         color: rgba(255, 255, 255, 1.0);
       }

       #skill-name-nav hr,
       .inactive-hr {
         border: none;
         width: 0;
         margin: 0 auto;
         height: 2px;
         background-color: #eb3b25;
         position: relative;
         top: -30px;
         transition: .5s ease all;
       }

       #skill-name-nav h3:hover+hr,
       #skill-name-nav h3:active+hr,
       #skill-name-nav h3:focus+hr,
       .active-hr {
         background-color: #fff;
         width: 200px;
         text-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
         top: -40px;
       }

       .column:nth-child(2) {
         position: relative;
         background: #fff;
         padding: 60px;
         box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
       }

       .skill-description {
         align-self: flex-start;
         line-height: 28px;
       }

       .eyebrow-h2 {
         font-size: 12px;
         font-family: 'Montserrat';
         font-weight: bold;
         text-transform: uppercase;
         letter-spacing: .1em;
         color: #6b7070;
       }

       .eyebrow-h2+hr {
         border: 1px solid #eb3b25;
         margin: 20px 0 40px;
         width: 50px;
       }

       .quote {
         font-size: 2em;
         font-family: 'Playfair Display';
         font-weight: 900;
         line-height: 1.25em;
         color: #2b3738;
       }