title: javascript horizontal menu click to open
body: <p>Trying to make javascript horizontal menu, but can't get second button to open its own items, (when i click the second button it opens the items that are for the first button) here is current code:</p>
  
  <p>JavaScript:</p>
  
  <pre><code>$(document).ready(function() {
    $(".menu-button,.menu-button1").click(function() {
      $(".menu-bar").toggleClass("open");
    });
  })
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="menu"&gt;
    &lt;li title="home"&gt;&lt;a href="#" class="menu-button home"&gt;menu&lt;/a&gt;&lt;/li&gt;
    &lt;li title="pencil"&gt;&lt;a href="#" class="menu-button1 pencil"&gt;pencil&lt;/a&gt;&lt;/li&gt;
    &lt;li title="about"&gt;&lt;a href="#" class="active about"&gt;about&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="menu-bar"&gt;
    &lt;li&gt;&lt;a href="#" class="menu-button"&gt;Menu0&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Home2000&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Parent&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="menu-bar"&gt;
    &lt;li&gt;&lt;a href="#" class="menu-button1"&gt;Menu1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>