title: How to show ul when clicking on link?
body: <p>I'm having trouble with this simple jQuery code.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;ul class="menu-affix nav-hover"&gt;
      &lt;li id="toggle-area"&gt;&lt;a&gt;Areas&lt;/a&gt;&lt;/li&gt;
      &lt;li id="toggle-industry"&gt;&lt;a&gt;Indrustry&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>when click on li area, there is another element in the same page that I want to add a class "open": There is it:</p>
  
  <pre><code>&lt;li id="show-area" class="dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;i class="icon ic-casa ic-bar"&gt;&lt;/i&gt;Áreas de Atuação&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
            &lt;li class="title-dropdown"&gt;CNI&lt;/li&gt;
            &lt;li&gt;&lt;a tal:attributes="href python:urlById(1208)"&gt;Competitividade&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a tal:attributes="href python:urlById(770)"&gt;Desenvolvimento Associativo&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a tal:attributes="href python:urlById(1250)"&gt;Economia&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a tal:attributes="href python:urlById(1251)"&gt;Infraestrutura&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a tal:attributes="href python:urlById(1252)"&gt;Inovação&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a tal:attributes="href python:urlById(1253)"&gt;Internacionalização&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a tal:attributes="href python:urlById(1254)"&gt;Leis e Normas&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a tal:attributes="href python:urlById(1255)"&gt;Meio Ambiente&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a tal:attributes="href python:urlById(1256)"&gt;Pequenas Empresas&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a tal:attributes="href python:urlById(1257)"&gt;Política Industrial&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a tal:attributes="href python:urlById(426)"&gt;Propriedade Intelectual&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a tal:attributes="href python:urlById(1259)"&gt;Trabalho&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a tal:attributes="href python:urlById(1260)"&gt;Tributação&lt;/a&gt;&lt;/li&gt;
            &lt;li class="title-dropdown"&gt;SISTEMA INDÚSTRIA&lt;/li&gt;
            &lt;li&gt;&lt;a tal:attributes="href python:urlById(1261)"&gt;Educação e Tecnologia&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a tal:attributes="href python:urlById(1262)"&gt;Qualidade de Vida&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a tal:attributes="href python:urlById(1263)"&gt;Responsibilidade Social&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
  </code></pre>
  
  <p>and my jQuery code:</p>
  
  <pre><code>$(document).ready(function(){
    $('#toggle-area').click(function(){
      if (! $('#show-area').hasClass('open')){
        $('#show-area').addClass('open');
      }
      else {
        $('#show-area').removeClass('open');
      }
    });
  });
  </code></pre>
  
  <p>This is not working, what I am missing? 
  Thanks in advance.</p>