Expand and collapse HTML list

This is an example of typical list constructed using HTML UL tag and LI tag.
By default it is just list. But with some javascript tweak, it can now expand and collapse.

First, we will need a simple html page with UL and LI.
Here is a simple example.

 

Then, using javascript, we add the onclick function to each of the SPAN elements. (Note : it can be hyperlink or image also)
The idea is to add an onclick function perform the collapse and expand function by hide and show the UL tag next to the SPAN.

Example 1

Or you can try a better implementation by using jquery.

Example 2

Click here to see live demo of example1 and example2.

 

10 thoughts on “Expand and collapse HTML list

  1. Hi,

    When I know how can do to make the list initially is collapsed.After I click only toggle into expand it?Thanks.

    • Just add this line
      $(function(){
      //hide or collapsed initially.
      $(‘#example_tree’).find(‘UL’).hide();
      ……….
      });

      • I don’t think this is correct. The following worked for me:

        $(‘#example_tree’).find(‘SPAN’).click(function(e){
        $(this).parent().children(‘UL’).toggle();
        });

        $(‘#example_tree’).find(‘SPAN’).parent().children(‘ul’).hide();

  2. Hi,

    So based on Jaden question above, it will be like this ?
    $(function(){
    $(‘#example_tree’).find(‘UL’).hide();
    $(‘#example_tree’).find(‘SPAN’).click(function(e){
    $(this).parent().children(‘UL’).toggle();
    //hide or collapsed initially.

    });

  3. Hey! Thanks for this code. it works very well. However, I have one question. If I wanted to add a “slide” effect to the menu, so that when i click to show the menu it will accordion-like reveal the menu from top to bottom (instead of just showing the full list at once), how would I go about doing that?

  4. I am trying to use the expand and collapse function in a book for my Kindle Fire. I am using the Calibre 64bit E-book Management software. Your programming works great on the software but when I transfer it to my Kindle it does not work. I have tried using MOBI, AZW3 formats. Any thoughts on how I can get this to work?

  5. Hi

    Is there possible to start and open pages without all expand and click on toggle into expand it’s but not Jquery, Prefer use Example 1 not Example 2?

    thanks

  6. For the “normally closed” option to work, I had to replace the smart quotes with normal ones:

    $(‘#example_tree’).find(‘UL’).hide();

    should be

    $(‘#example_tree’).find(‘UL’).hide();

    You can hardly see the difference here, but it makes all the difference in practice ;-)

  7. Having difficulty having the list closed initially, can you please explain the code with the list being closed to start with

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">