CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Daniel Serretti
Daniel Serretti

Reputation: 342

How to show ul when clicking on link?

I'm having trouble with this simple jQuery code.

My HTML:

<ul class="menu-affix nav-hover">
    <li id="toggle-area"><a>Areas</a></li>
    <li id="toggle-industry"><a>Indrustry</a></li>
</ul>

when click on li area, there is another element in the same page that I want to add a class "open": There is it:

<li id="show-area" class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon ic-casa ic-bar"></i>Áreas de Atuação</a>
        <ul class="dropdown-menu">
          <li class="title-dropdown">CNI</li>
          <li><a tal:attributes="href python:urlById(1208)">Competitividade</a></li>
          <li><a tal:attributes="href python:urlById(770)">Desenvolvimento Associativo</a></li>
          <li><a tal:attributes="href python:urlById(1250)">Economia</a></li>
          <li><a tal:attributes="href python:urlById(1251)">Infraestrutura</a></li>
          <li><a tal:attributes="href python:urlById(1252)">Inovação</a></li>
          <li><a tal:attributes="href python:urlById(1253)">Internacionalização</a></li>
          <li><a tal:attributes="href python:urlById(1254)">Leis e Normas</a></li>
          <li><a tal:attributes="href python:urlById(1255)">Meio Ambiente</a></li>
          <li><a tal:attributes="href python:urlById(1256)">Pequenas Empresas</a></li>
          <li><a tal:attributes="href python:urlById(1257)">Política Industrial</a></li>
          <li><a tal:attributes="href python:urlById(426)">Propriedade Intelectual</a></li>
          <li><a tal:attributes="href python:urlById(1259)">Trabalho</a></li>
          <li><a tal:attributes="href python:urlById(1260)">Tributação</a></li>
          <li class="title-dropdown">SISTEMA INDÚSTRIA</li>
          <li><a tal:attributes="href python:urlById(1261)">Educação e Tecnologia</a></li>
          <li><a tal:attributes="href python:urlById(1262)">Qualidade de Vida</a></li>
          <li><a tal:attributes="href python:urlById(1263)">Responsibilidade Social</a></li>
        </ul>
      </li>

and my jQuery code:

$(document).ready(function(){
  $('#toggle-area').click(function(){
    if (! $('#show-area').hasClass('open')){
      $('#show-area').addClass('open');
    }
    else {
      $('#show-area').removeClass('open');
    }
  });
});

This is not working, what I am missing? Thanks in advance.

Upvotes: 0

Views: 1893

Answers (2)

H H
H H

Reputation: 2123

Adding a class doesn't mean it will show/hide the element.

CSS

You will need CSS to achieve this:

#show-area {
   display:none;
}

#show-area.open {
   display: block; 
}

The above is a very simple way that could make the show/hide happen. It's saying that on default the element with the ID show-area is hidden (display: none)

Then it says that when the element with the ID show-area has a class 'open' it is shown (display: block)

Refer to this website for help

jQuery

Another way to achieve what you want is to use jQuery to show and hide the element

if (! $('#show-area').hasClass('open')){
   $('#show-area').show();
}
else {
   $('#show-area').hide();
}

This will either need:

$(document).ready(function(){
   $('#show-area').hide();
});

OR

In your css:

#show-area {
   display:none;
}

Upvotes: 0

Jacques
Jacques

Reputation: 7135

$(document).ready(function(){
  $('#toggle-area').click(function(){
    $('#show-area').toggleClass("open");
  });
});

This will remove the class if it's there or add it if it's not.

Upvotes: 1

Related Questions