title: How can I shorten this code that closes the navigation when a nav-link is clicked
body: <p>This works fine, the first part makes my navigation open/close when the Hamburger is clicked, and the second part of the code makes the navigation close when a nav-link is clicked. All sounds great, and there seems no issue with this... however as a complete beginner to JavaScript, I was just wondering if you can do this without calling document.ready twice?</p>
  <pre><code>$(document).ready(function(){
      $('.nav-button').click(function(){
      $('body').toggleClass('nav-open');
      });
  });
  
  
   $(document).ready(function(){
     $('.nav-link').click(function(){
       $('body').toggleClass('nav-open');
     });
   });
  </code></pre>
  <p>my html;</p>
  <pre><code>&lt;a class=&quot;nav-button ml-auto&quot;&gt;
  &lt;span id=&quot;nav-icon3&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;div class=&quot;fixed-top main-menu&quot;&gt;
     &lt;div class=&quot;flex-center p-5&quot;&gt;
        &lt;ul class=&quot;nav flex-column&quot;&gt;
           &lt;li class=&quot;pb-3&quot;&gt;
              &lt;span class=&quot;nav-text&quot;&gt;Where to next?&lt;/span&gt;
           &lt;/li&gt;
           &lt;li class=&quot;nav-item delay-1&quot;&gt;&lt;a class=&quot;nav-link&quot; href=&quot;#when&quot;&gt;When &amp; Where&lt;/a&gt;
           &lt;/li&gt;
           &lt;li class=&quot;nav-item delay-2&quot;&gt;&lt;a class=&quot;nav-link&quot; href=&quot;#info&quot;&gt;About Us&lt;/a&gt;&lt;/li&gt;
           &lt;li class=&quot;nav-item delay-3&quot;&gt;&lt;a class=&quot;nav-link&quot; href=&quot;#timetable&quot;&gt;Timetable&lt;/a&gt;
           &lt;/li&gt;
           &lt;li class=&quot;nav-item delay-4&quot;&gt;&lt;a class=&quot;nav-link&quot; href=&quot;#photogallery&quot;&gt;Photo
              Gallery&lt;/a&gt;
           &lt;/li&gt;
        &lt;/ul&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>