title: How can one accomplish this topmenu
body: <p>So I have been trying to get something similar to this topnav menu found on this page: <a href="https://www.apotekhjartat.se/" rel="nofollow noreferrer">https://www.apotekhjartat.se/</a></p>
  
  <p>Not sure if this is pure css, javascript or some jquery. (guess its called/reffered as toggle or hide/show div)</p>
  
  <p>I like the way the arrows are displayed if the content is opened or closed and that the content slides down.</p>
  
  <p>If I have a look at the examples on w3schools I can only find that that works with one link...
  <a href="https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp</a></p>
  
  <p>Simple markup:</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;header&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;This is my first link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;This is my second link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;This is my third link&lt;/a&gt;&lt;/li&gt;    
      &lt;/ul&gt;    
  &lt;/header&gt;
      
      
  &lt;section id="01" style="display: none"&gt;
      &lt;p&gt;This is the conent of the first link&lt;/p&gt; 
  &lt;/section&gt;
      
  &lt;section id="02" style="display: none"&gt;
      &lt;p&gt;This is the conent of the second link&lt;/p&gt; 
  &lt;/section&gt;
      
  &lt;section id="03" style="display: none"&gt;
      &lt;p&gt;This is the conent of the third link&lt;/p&gt; 
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can someone point me in the correct direction to get something similar to: <a href="https://www.apotekhjartat.se/" rel="nofollow noreferrer">https://www.apotekhjartat.se/</a>...</p>
  
  <p>Thanks!</p>