title: A simple way to show one Div and hide all others?
body: <p>I'm looking for a way to show one div and hide all the other ones. With the 1st one being displayed by default.</p>
  
  <p>I was able to achieve this using jQuery but the code is quite lengthy and I feel like there's a better/more optimized way to go about this.</p>
  
  <p>Here's the snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".link-one").click(function() {
    $(".div-one").show();
    $(".div-two,.div-three,.div-four,.div-five").hide();
   
  });
  $(".link-two").click(function() {
    $(".div-two").show();
    $(".div-one,.div-three,.div-four,.div-five").hide();
  });
  $(".link-three").click(function() {
    $(".div-three").show();
    $(".div-one,.div-two,.div-four,.div-five").hide();
  });
  $(".link-four").click(function() {
    $(".div-four").show();
    $(".div-one,.div-two,.div-three,.div-five").hide();
  });
  $(".link-five").click(function() {
    $(".div-five").show();
    $(".div-one,.dive-two,.div-three,.div-four").hide();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.div-two,
  .div-three,
  .div-four,
  .div-five {
    display: none
  }
  
  a {
    display: inline-block;
    margin-right: 10px;
    padding: 5px 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;a href="#" class="link-one"&gt;Link One&lt;/a&gt; &lt;a href="#" class="link-two"&gt;Link Two&lt;/a&gt; &lt;a href="#" class="link-three"&gt;Link Three&lt;/a&gt; &lt;a href="#" class="link-four"&gt;Link Four&lt;/a&gt; &lt;a href="#" class="link-five"&gt;Link Five&lt;/a&gt;
  
  &lt;div class="div-one"&gt;
    Div #1
  &lt;/div&gt;
  
  &lt;div class="div-two"&gt;
    Div #2
  &lt;/div&gt;
  
  &lt;div class="div-three"&gt;
    Div #3
  &lt;/div&gt;
  
  &lt;div class="div-four"&gt;
    Div #4
  &lt;/div&gt;
  
  &lt;div class="div-five"&gt;
    Div #5
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here's a JSfiddle that should help showcase what I mean:
  <a href="https://jsfiddle.net/z58ayhtw/6/" rel="nofollow noreferrer">https://jsfiddle.net/z58ayhtw/6/</a></p>