title: Hiding and Toggle 3 different Div Class
body: <p>I have three different span.class's that I want to show content for whenever they are clicked. Those div classes are: </p>
  
  <pre><code>&lt;div id="one"&gt;
              &lt;span class="aboutme"&gt; &lt;p&gt;About me&lt;/p&gt;&lt;/span&gt;
              &lt;span class="skills"&gt; &lt;p&gt;Skills&lt;/p&gt;&lt;/span&gt;
              &lt;span class="goals"&gt;&lt;p&gt;My Goals&lt;/p&gt;&lt;/span&gt;
         &lt;/div&gt;
  </code></pre>
  
  <p>I do want the span.aboutme to show on page load up, but hide whenever these other classes are clicked. </p>
  
  <p>here's what I have so far in jsfiddle, but it's not working out. </p>
  
  <p><a href="https://jsfiddle.net/ispykenny/m4n8fzfp/" rel="nofollow">https://jsfiddle.net/ispykenny/m4n8fzfp/</a></p>
  
  <pre><code>&lt;div class="thirdwrapper"&gt;
       &lt;div class="wrapperthree"&gt;
         &lt;div id="one"&gt;
              &lt;span class="aboutme"&gt; &lt;p&gt;About me&lt;/p&gt;&lt;/span&gt;
              &lt;span class="skills"&gt; &lt;p&gt;Skills&lt;/p&gt;&lt;/span&gt;
              &lt;span class="goals"&gt;&lt;p&gt;My Goals&lt;/p&gt;&lt;/span&gt;
         &lt;/div&gt;
  
  
  
          &lt;div id="two"&gt;
          &lt;span class="aboutmecontent"&gt;
          &lt;p&gt;content for about me
          &lt;/span&gt;
          &lt;span class="skillscontent"&gt; &lt;p&gt;content for skills&lt;/p&gt; &lt;/span&gt;
          &lt;span class="goalscontent"&gt; &lt;p&gt;cotent for goals&lt;/p&gt;&lt;/span&gt;
      &lt;/div&gt;
        &lt;/div&gt;
          &lt;/div&gt;
            &lt;/div&gt;
  
      .thirdwrapper{
          width: 100%;
          height: auto;
          min-height: 400px;
          background-color: #F2F2F2;
          margin-top: 0px;
          padding-top: 0px;
  
      }
      .wrapperthree{
          max-width: 1050px;
          min-height: 400px;
          min-width: auto;
          height: auto;
          margin-left: auto;
          margin-right: auto;
          overflow: hidden;
          margin-top: 0px;
          padding-top: 0px;
      }
      .wrapperthree p{
          margin-top: 0px;
          padding-top: 0px;
  
  
      }
      #one{
          max-width: 525px;
          width: auto;
          height: auto;
          max-height: 400px;
          border:1px solid white;
          float: left;
          font-size: 80px;
          padding: 0;
          margin: 0;
          padding-top: 60px;
          font-family: 'Lora', serif;
      }
  
      #one p{
          text-align:center;
          width:400px;
          padding: 0;
          margin: 0;
  
  
      }
  
      #two{
          max-width: 525px;
          width: auto;
          height: auto;
          min-height: 400px;
          overflow: hidden;
          margin-top: 0px;
          padding-top: 60px;
          padding-left: 60px;
  
      }
      span.aboutme p {
          background-color:#666;
  
      }
      .skills p{
          background-color: #999;
      }
      .goals p{
          background-color: #333;
      }
      .skillscontent p{
          display: none;
      }
      .goalscontent p{
          display: none;
      }
  </code></pre>