Hiding and showing
    and
  • on click using Javascript


Tags: javascript,jquery,html,css

Problem :

I need to show a few cateogaries on my web page and their sub-cateogaries as well. So I have arranged them in the form of nested <ul> <li> tags. I want the effect that, only when a user clicks on one of the cateogaries, all the sub-cateogaries ahould become visible. Initially no sub-cateogaries are visible.


In the body part, I have done this

<ul>
   <li class="dropdown">Data mining and data warehousing
      <ul>
           <li>Data mining techniques</li>
           <li>Knowledge discovery</li>
      </ul>
   </li>

    <li class="dropdown">Soft computing and artificial intelligence
       <ul>
            <li>Fuzzy systems</li>
            <li>Neural networks</li>
       </ul>
    </li>
</ul>

In the css part, I have done

li.dropdown ul {
display : none;
}

And I have added the following javascript script in the head section of the html page

<script type="text/javascript">
$('li.dropdown').click(function() {
   $(this).children('ul').toggle();
});
</script>

Initailly, the effect works fine and all the sub cateogaries are hidden. However, I want, say when I click on Data mining and data warehousing, then the two sub-cateogaries should also become visible, which are Data mining techniques and Knowledge discovery.


Also, when I click on other cateogary, the sub-cateogaries of previously opened cateogaries should collapse again. How can I do that ?



Solution :

So the idea is to hide everything but the clicked li, and then toggle subcategory visibility for the clicked one:

$('li.dropdown').click(function() {
   $('li.dropdown').not(this).find('ul').hide();
   $(this).find('ul').toggle();
});

Here is the jsFiddle with example.


    CSS Howto..

    CSS Horizontal Menu has wrong x-position, how to put directly under parent menu?

    How to reference another selector in css

    How can I position a form with controls over a Google Map?

    CSS attribute selectors: how to escape newlines within attribute value?

    CSS - How it works

    How to apply CSS page-break to print a table with lots of rows?

    css ul li nested menu with a padding. How on hoover retain width of the menu?

    How to handle text overflow. Is there a Firefox equivalent to the text-overflow style from IE and Safari?

    jQuery Show/Hide for and

    How to make the transitions in my css work

    How to create an image tag cloud

    How to externally style with CSS the specific 3 td tags on the html table generated by the pager row of a asp.net gridview control

    How can I create a full height responsive horizontal scrolling list of images with CSS

    how to make minified and readable css file in sublime text?

    How to make css border like this? [closed]

    How to make a image stay at the bottom but not rise up

    How to set CSS class to Button control using Session value in design page

    How do i make a div stick down from his div container?

    how do I use the :valid and :invalid selectors for css?

    How to use css in asp.net

    CSS - How to auto adjust DIV height according to next sibling height?

    PNG image showing up with white background even though it has a clear background

    How to style the tabs in primary menu links in a Drupal 7 subtheme?

    HTML & CSS: How do I completely remove the scroll-bars on the side of
    ?

    css divs display:none reseting and showing divs when function is called

    How to fill a QTextBrowser with a single table in Qt?

    How to replicate {cursor: hand; cursor: pointer} in jQuery

    Boostrap 3: how to force the content of layout columns to be of same height?

    How to align this CSS menu to the right of its containing div?

    How to fix hover on transparent photo