title: jQuery nav slider on click
body: <p>The first <code>.post__slide</code> is visible <strong>if</strong> I take out the <code>.post__menu</code> wrapping the <code>nav</code>, but if I leave the <code>.post__menu</code> wrapping the <code>nav</code> the first <code>.post__slide</code> <strong>isn't</strong> visible. </p>
  
  <p>To see it working as it should remove the <code>.post__menu</code> wrapper in the HTML and you will see that the first <code>.post__slide</code> is visible. </p>
  
  <p><strong>My question:</strong> How do I restructure my JS so that I keep the <code>.post__menu</code> wrapper in my markup and the first <code>.post__slide</code> is visible?</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>$(function() {
    $('.post nav a').on('click', function() {
      showSlide($(this).index());
    });
  
    showSlide(0);
  
    function showSlide(index) {
      // Make the post__slide post__slide--visible
      $('.post .post__slide.post__slide--visible').removeClass('post__slide--visible');
      $('.post .post__slide:nth-of-type(' + (index + 1) + ')').addClass('post__slide--visible');
  
      // Set the tab to post__nav--selected
      $('.post nav a.post__nav--selected').removeClass('post__nav--selected');
      $('.post nav a:nth-of-type(' + (index + 1) + ')').addClass('post__nav--selected');
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.post {
    position: relative;
  }
  
  .post .post__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100px;
  }
  
  .post .post__nav a {
    padding: 20px 0px;
    text-align: center;
    width: 100%;
    cursor: pointer;
  }
  
  .post .post__nav a:hover,
  .post .post__nav a.post__nav--selected {
    color: #737d8b;
    font-weight: 700;
  }
  
  .post .post__slide {
    position: absolute;
    top: 0px;
    left: 100px;
    width: 0px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.1s linear 0s;
  }
  
  .post .post__slide.post__slide--visible {
    width: calc(100% - 100px);
    overflow: scroll;
    opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="post"&gt;
    &lt;div class="post__menu"&gt;
      &lt;nav class="post__nav"&gt;
        &lt;a&gt;post__slide #1&lt;/a&gt;
        &lt;a&gt;post__slide #2&lt;/a&gt;
        &lt;a&gt;post__slide #3&lt;/a&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
    &lt;div class="post__slide"&gt;
      &lt;p&gt;post__slide #1&lt;/p&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis magna ipsum, nec sodales lectus rutrum eleifend. Mauris laoreet tincidunt erat, nec mattis tellus luctus ac. Vivamus et pulvinar felis, a placerat dui. Aenean ornare, ipsum
        vel aliquet mattis, ante nibh rhoncus erat, in auctor tortor libero quis diam. Cras non purus eget enim dapibus pharetra. Integer eget commodo nisi. Quisque sed pharetra sapien. Suspendisse potenti. Aliquam ligula elit, fermentum a ex ac, porttitor
        fermentum velit. Phasellus quis lacinia nunc. Sed risus neque, venenatis in libero ac, auctor sagittis neque. Suspendisse hendrerit magna in sem mattis eleifend. Praesent vitae hendrerit est.&lt;/p&gt;
      &lt;p&gt;Nunc sit amet ante quis eros convallis dictum. Sed pretium viverra vehicula. Fusce elementum sagittis nulla, sed mollis enim cursus sed. Donec quis magna ultrices tellus consectetur pharetra vel vitae lorem. Proin eu fringilla ligula, non mollis felis.
        Cras scelerisque faucibus auctor. Ut auctor rutrum consectetur. Suspendisse in luctus risus. Nam condimentum, est placerat posuere commodo, libero elit maximus turpis, quis auctor mi risus a mauris. Donec rutrum, tortor sit amet viverra lobortis,
        nisi est varius libero, eget vestibulum arcu ex lacinia augue. Integer diam tellus, interdum vitae tellus in, accumsan suscipit velit. Sed ut blandit mauris. Etiam ac arcu eget nisi placerat feugiat. Sed laoreet, diam id iaculis tincidunt, turpis
        ex tristique felis, eu varius sapien lectus at justo. Donec sit amet congue erat. Curabitur nibh neque, dapibus ac placerat nec, maximus sollicitudin est.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="post__slide"&gt;
      &lt;p&gt;post__slide #2&lt;/p&gt;
      &lt;p&gt;Donec quis tortor vehicula, auctor elit nec, consequat urna. Curabitur hendrerit ipsum erat, fringilla vehicula velit lacinia eget. Suspendisse scelerisque volutpat sapien, et hendrerit est lobortis vitae. Curabitur et ultrices nibh. Sed molestie
        sagittis ante et gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sit amet ex tincidunt, vulputate lectus at, malesuada nibh.&lt;/p&gt;
      &lt;p&gt;Morbi semper, sem non scelerisque pulvinar, felis sapien accumsan quam, a viverra lorem eros et massa. Sed sed tincidunt nunc. Pellentesque semper vulputate lacus eget laoreet. Curabitur ultricies sem ut ullamcorper gravida. Cras ut ex ut dolor blandit
        sollicitudin vel eu tortor. Nulla pulvinar vulputate rutrum. Quisque ligula quam, aliquam pharetra enim non, scelerisque ullamcorper metus. Integer ullamcorper eros eu magna sagittis tempor. Quisque lacus ante, sagittis luctus efficitur quis, varius
        a nunc. Nulla risus ante, blandit sit amet dictum id, tempor sit amet leo. Morbi nec eleifend elit.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="post__slide"&gt;
      &lt;p&gt;post__slide #3&lt;/p&gt;
      &lt;p&gt;Nulla vitae nulla felis. Donec efficitur arcu id turpis auctor blandit. Cras consequat efficitur eleifend. Phasellus vel justo lectus. Mauris sed lacus ex. In vulputate, tortor ac interdum dapibus, lorem tortor interdum diam, vitae fermentum felis
        nisi id neque. Integer diam elit, ultricies quis suscipit sit amet, rutrum a nulla.&lt;/p&gt;
      &lt;p&gt;Donec quis ipsum magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean varius ante sed eros tristique fermentum. Duis sed vulputate tellus, in auctor tellus. Donec sed tempus odio. Nunc hendrerit erat nec dui sollicitudin, et
        ullamcorper enim mattis. Quisque accumsan rutrum turpis ut suscipit. Mauris mi ex, iaculis sit amet dui non, faucibus pellentesque eros. Fusce et congue urna, ac ultricies ipsum. Ut accumsan euismod felis, vel ornare lectus dictum ut. Aenean eget
        velit vulputate, placerat ligula et, maximus mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>