231 Responses

← Previous Page 5 of 5
  1. Prashant
    Prashant April 28, 2014 at 12:35 pm |

    how to change the state of elements to collapsed state if i click on parent element.
    for e.g in demo if i click on “Item A” then expand all the sub items(i.e Item A.1 & Item A.3) in “Item A” n then if i click on Item A then all the sub elements should go into collapsed state.

  2. Prashant
    Prashant April 29, 2014 at 9:06 am |

    How to change state of children elements to collapsed when we click on a parent.
    for e.g in demo if i expand Item A then later expand Item A.1 & Item A.3. now when i click on Item A,Item A.1 & Item A.3 should go to collapsed state & should be hidden.
    how to achieve this??

  3. bk
    bk May 19, 2014 at 3:00 pm |

    Hi, I am trying to implement your expandable list. May I know where I should add the Javascript? Thank you.

  4. bk
    bk May 20, 2014 at 1:46 am |

    I wanted to use this in the blog page. What I did was to copy the code for the list into the page. I put the CSS portion in the Style of the theme. For the Javascript code, where should I place it for the list to work. I trying putting it after the wp_head in header.php file but it didn’t work. How may I make it work? Please advise. Thank you.

  5. bob
    bob July 1, 2014 at 3:12 pm |

    If i could I would kiss you on the lips. This is awesome. Thanks so much. Saved me about 40 hours worth of work.

  6. Bradley
    Bradley July 14, 2014 at 6:47 pm |

    Can you provide the example without using Jquery?

  7. angry_tapdancer
    angry_tapdancer July 20, 2014 at 7:34 am |

    This seemed like an attractive solution except for two things which took me hours to figure out, and may be handy for other users to know:
    * won’t work for lists that are dynamically created, since your function is only called on document ready
    * because you rely on an ID to modify the element, it’s not an easily scalable solution for many separate lists
    …a third thing that drove me nuts is that I can’t change the tabulation of the list, but I suspect this is a broader style problem that I just don’t know how to deal with.

  8. Sam R
    Sam R July 30, 2014 at 3:33 pm |

    Dear Jasalguero,

    First of all thank you very much for the tutorial and also thanks a lot for the continuos support you’ve been providing your readers through your comments.

    In my version of your implementation, all the items in my list are links. I have several items in my list (about 6-7) and each one of them have several in them (all links again). I am using this list as a menu in my page.

    Example of my list: when I expand the tree and click on Item-A3, it loads the content related to A3 on the right side of the page. At this point the menu also collapses to the original state. When I want to look at another item (say item-A4) under item A, I would have go back to expanding my list again from the menu.

    What I am trying to accomplish here is… if I click on any item under Item A, while the page loads the content corresponding to the links, I still want to keep the Item A list expanded until I go to a new main item, say Item D.

    I have gone through all the comments in your post and have tried some of the suggesstions given on elementID. But these don;t seem to work well with my codes.

    I have tried the following:

    $(document).ready( function() {

    All of these seem to break my codes and makes the list expanded at all times. Could I be getting the element ID thing wrong. I am not very savvy with javascript so please bear with me. Any example codes would be quite useful.

    Thanks again.

  9. Sam R
    Sam R July 30, 2014 at 4:29 pm |

    Sorry…did I violate a code or something. My comment just dissapeared. Was really hoping to find a solution to my problem here!! Anyway, thanks again for the tutorial.

  10. Robert Boehm
    Robert Boehm August 21, 2014 at 3:46 pm |

    I love this menu thank you!

    I would like to know how to make some list items stay expanded when you land on the page while keeping some collasped, instead of having all list items show as collasped from the start. I tried added the “expanded” class to one li but it wasn’t successful. Also, how can I have all list items expanded from the start instead of collasped.

    Advice is greatly appreciated. Thank you

  11. js-newbie
    js-newbie September 1, 2014 at 11:24 am |

    Thank you so much for this great code. I have 4 questions:
    1: I would like the links inside the elements to open in the same window. To achieve this, I have added ‘_self’ like this: window.open($(this).attr(‘href’),’_self’) – is that best practice javascript? (I’m a newbie, and to me it seems like you first tell the browser to open in a new window and then regret it – could it be done wiser?)
    2: How do I keep the list expanded to show the children, when I have clicked the link inside the parent element? When I click the plus next to Item A, for instance, the subitems A.1 and so on are displayed. But if I click the link, the subitems are not shown. My guess is that it’s because the page is reloaded. Is there a way to make the browser “remember” the click and keep the children visible? I think it would be less confusing for the visitor if he can see where he is.
    3: How do I style the clicked link with, say, bold text or another style, to visualize which page the user is currently on?
    4: Is it possible to make a click on a parent link item both expand the list and take the user to the specified page at the same time? I just assume that some visitors might have trouble figuring out that they need to click the plus to see the subpages. It would be great if the plus and minus buttons would still keep their functionality – because it’s useful to still be able to expand and collapse without having to go to another page.

  12. Visentije
    Visentije September 11, 2014 at 6:30 am |

    Adding links inside the elements: hyperlink that points to the bookmark on same page.

    If I add hyperlink (inside the elements) that points to the bookmark on same page, like:

    Top of Page

    than, that hyperlink always opened in NEW tab (correct location of page), instead in same tab another location? I want to that kind of hyperlink open in _self page. Any chance to do that in your code?

    “Target” attribute values (“_blank|_self|_parent|_top|) do not change anything, the hyperlink continue to open always in another, new tab, although it should point on bookmark in SAME page!

  13. mophannad
    mophannad September 12, 2014 at 11:05 am |

    thanks,i this is useful to me a lot

  14. Kristen
    Kristen September 16, 2014 at 6:50 pm |

    I have a question along the same lines as Visentije,
    I would like to include a link inside the collapsible list and would like it to open in the same window/tab.
    I tried changing window.open($(this).attr(‘href’)); to window.location($(this).attr(‘href’)); or to window.open($(this).attr(‘href’, ‘_self’)); But neither result works, the first change gave me the original problem, the link would work at all and the second attempt had no change. Any ideas?

  15. Kristen
    Kristen September 16, 2014 at 7:21 pm |

    For anyone who was/is having the same issue as me I read back through all of the comments and found a solution that is at least working for me. Rex posted a lot of code and I realized that my attempts to fix it were just barely off so I thought I would share:
    Original: //Hack to add links inside the cv
    $(‘#expList a’).unbind(‘click’).click(function() {
    return false;
    Fixed: //Hack to add links inside the cv
    $(‘#expList a’).unbind(‘click’).click(function() {
    return false;
    Basically just needed to move where I added the _self element and it works like a charm. Thanks for your hard work jasalguero!

  16. Aany
    Aany September 22, 2014 at 12:55 pm |

    how to expand data on click of view more button and how to hide it with same button in HTML??

  17. nourh
    nourh December 8, 2014 at 4:15 am |

    its not working with me !!!!!!!!!!

  18. Manoj
    Manoj December 9, 2014 at 8:56 am |

    Need help,
    I have created this list
    1. When I click on Item A, It expands. (OK)
    2. When I click Collapse All, All collapse (OK)
    3. When I again click A, One item is missing. (Problem)

    It happens only with links and only when I click collapse all button.
    Please help.

  19. Megaera
    Megaera December 19, 2014 at 10:25 am |

    Hi. I want to make a very simple collapsible list that I can open offline with any browser. What I want to achieve is to make all the “Items 1”, “Items 2”, “Items 3” collapsible as well. Like a level 2 list. Please advise. Thanks in advance.

    .row { vertical-align: top; height:auto !important; }
    .list {display:none; }
    .show {display: none; }
    .hide:target + .show {display: inline; }
    .hide:target {display: none; }
    .hide:target ~ .list {display:inline; }
    @media print { .hide, .show { display: none; } }

    Collapse Cancellation

    Item 1
    Item 2
    Item 3

    Collapse Reschedule

    Item 1
    Item 2
    Item 3

  20. Andrii
    Andrii January 7, 2015 at 6:14 pm |

    If you need hyperlinks to be opened in the same windows just modify the line:
    window.open($(this).attr(‘href’), ‘_self’);

  21. pyratek
    pyratek January 12, 2015 at 4:43 pm |

    I use your example to make my sitemap, http://www.super-cazare.com/places/joint.php It wprk nice but my hyperlink does not wor anymore! Can you help me with that please?!

  22. Subin
    Subin February 1, 2015 at 11:34 am |

    Thanks a lot..:):)

  23. Kyle
    Kyle February 10, 2015 at 5:45 am |

    I am using this code to build a collapsing dynamic PHP form and it works great except for one problem! In my list instead of links I have checkboxes and it seems to have overridden the ability to check the boxes. Can you please update the prepareList function to work with other clickable items? Is there a workaround? Thanks!!!

  24. Walter
    Walter March 29, 2015 at 4:24 am |

    Thanks, i used this in an opensource project. I will add a thanks in the documentation.

  25. Luca
    Luca April 24, 2015 at 10:35 pm |

    Hi All,

    I am quite new on these matter, I am studying but not yet able to figure out the solution to join two effects I’d like to have on the menu of a website I working on.

    I find a way to have expanding menu here: thank you jasalguero!
    I find a way to have a floating menu here: http://tinyurl.com/flaoting-menu

    But I am not able to put this two things together: having an expanding menu that floats on the page.

    Can anyone give me any hints to solve this?

    Thank you so much in advance!

  26. Terri
    Terri May 6, 2015 at 6:46 pm |

    This works great except for one thing… it is not accessible (e.g. cannot tab to it to expand the menu). Any ideas on how best to make this be accessible?

  27. Luki R Daniel
    Luki R Daniel May 11, 2015 at 4:26 pm |

    This article saves my day. Thanks a lot!

    And also thanks for Kristen. Works perfectly :)

  28. HDB
    HDB August 18, 2015 at 11:50 pm |

    This article saves my day, really. I’ve researched several tools and open-sources to build an expandable/collapsible tree that allows combining various controls in each node (label, text-boxes, and buttons, links, etc.) but have not succeeded so far. There are many fancy stuffs out there but they are not addressing such a common need. There are of-course issues needed to resolve in order to satisfy specific application – but this article absolutely provides a simple, yes effective and flexible-to-extend solution.

    I would confirm that it works for:

    1. Dynamically created lists: I used YUI to dynamically create lists, attach root list to a view, then invoke prepareList
    2. Multiples lists: add parameter listID to prepareList(listID) and modify it to construct the id as ‘#’ + listID, dynamically ‘id’ root-list with unique id, then passing that id to prepareList(listID). Make sure to modify style.css not to specific to an ‘id’

    1. Need to handle new list elements those are added to list after prepareList()

    Ways to go, thanks a lot!

  29. HDB
    HDB August 21, 2015 at 4:42 pm |

    I applied this expand and collapse all in large selections of items definitely show slowness.
    using jQuery method.css({‘display’:’none’}) vs. .css({‘display’:’block’}) in stead of hide() vs. show() respectively will significantly improve speed of large selections.

    To recap, here is a list of methods to change the display of elements in order from fastest to slowest:

    Enabling/Disabling a stylesheet
    .css(‘display’, ”), .css(‘display’, ‘none’)
    .addClass(), .removeClass()
    .show(), .hide()

Leave a Reply