title: Changing CSS for specific "id" using "this" in jQuery
body: <p>My main goal is to have the user click on any "nav" class item and display a certain paragraph ID based on which nav class was clicked. I can add the .css to this post if needed but the main thing is each paragraph ID has "display" none".</p>
  
  <p>Here's the "nav" items.</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-html lang-html prettyprint-override"><code>        &lt;div id="home" class="nav"&gt;Home&lt;/div&gt;
    &lt;div id="store" class="nav"&gt;Store&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's my paragraph items which uses an ID of the nav ID's plus the number 1 which I figured was easiest when using jQuery as you'll see below in my jQuery code.</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-html lang-html prettyprint-override"><code>&lt;p id="home1"&gt;Home text&lt;/p&gt;
    &lt;p id="store1"&gt;Store text&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my jQuery code which when using "alert(changeCSS)" shows the correct ID ("ID" plus the number 1).</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-css lang-css prettyprint-override"><code> &lt;script type="text/javascript"&gt;
  
     $(".nav").click(function() {
  
      var changeCSS = $(this).attr('id') + "1";
  
      $(changeCSS).css('display', 'block');
  
     });
    
   &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm new to jQuery and programming in general so it maybe something simple I hope. Let me know if you have any suggestions. Thanks!</p>