197 Responses

← Previous Page 4 of 4
  1. Mark Corrigansan
    Mark Corrigansan March 11, 2013 at 3:49 pm |

    Hi Guys. I sorted the problem. http://www.pmway.co.za/xpand.html is now working – the way I want. If you want the code email me. Check it out. Regards Mark

  2. Mark Corrigansan
    Mark Corrigansan March 11, 2013 at 3:51 pm |

    Hi sorted the expand and close. http://www.pmway.co.za/xpand.html now works the way I want it. If you want the code email me. Regards

  3. Android News
    Android News March 17, 2013 at 7:32 am |

    How to make only one list expandable at a time. When a second one is expanded it should automatically close the first one.

  4. penraeth
    penraeth April 5, 2013 at 2:12 am |

    I’m confused by something. It seems that any child tags within an will not trigger the click event of the parent. For example, I took your source code and just put bold tags around the text Item A … after which, clicking it has no effect, though clicking to the right of it works. Effectively, you can’t have anything but text, otherwise you have dead zones in the hit area. Am I missing something?

  5. Adi
    Adi April 15, 2013 at 12:00 pm |

    jasalguero .

    Thanks for the wonderful
    piece of code jasal. It appears the code is working only in IE for me.
    Any idea as to what may be the problem

  6. Ciprian
    Ciprian April 19, 2013 at 6:15 pm |

    The checkboxes inside an expList doesn’t works.

    How can i get back the focus on a check box in an expList?

  7. Clicking in one spot, registering as a click somewhere else | BlogoSfera

    [...] I am using the expandable lists as presented here (with a demo here), and so far the JavaScript code allows for a list to be expanded when the line [...]

  8. SmillaSnow
    SmillaSnow June 5, 2013 at 8:38 pm |

    The same thing is happening to me! Is there any way around this?

  9. TwoChiefs AutoParts
    TwoChiefs AutoParts June 13, 2013 at 6:12 pm |

    Man you really rock! I was wondering how i could make this work on a custom ebay page, could you help with that?

  10. Sam Hudson
    Sam Hudson August 23, 2013 at 7:11 am |

    First of all thanks for such an awesome feature! I might put too many different types of content within this expand collapse box, hence, having bit of an issue here. Please see my sample code: http://jsfiddle.net/d5RPF/5/

    Issue: i have three different types of content and can’t seem to make all of them work at once! i have simple hyperlink, simple pop-up by java and shadowbox.js pop-up.

    if i use,

    top.frames['Pop'].location.href =window.open($(this).attr(‘href’));

    I can open only my pop.php(iframe popup) using shadowbox.js(it’s a popular java like highslide) but i can’t open my social share button(both java and html within jsfiddle) or simple hyperlinks. Also, i get a java error “Uncaught SyntaxError: Unexpected identifier ” line 12

    if i use following,

    window.open($(this).attr(‘href’), ‘_self’);

    My regular and social links work properly but pop.php does’t open within shadow pop-up box, instead takes user entirely to new page from current page.

    Lastly, if i use this:


    i can open my pop.php but it opens in both pop-up window and a new window. Also, my social link opens empty window.

  11. Sam Hudson
    Sam Hudson August 24, 2013 at 11:22 pm |

    Thanks a lot Jose!

    I kinda figured these different elements need to be unbind but wasn’t sure if they can be done all together or separately. Looks like they have to separated.

    Everything looks good now except this error i get in Chrome. Any idea?

    Uncaught TypeError: Cannot read property ‘location’ of undefined
    (anonymous function)

    This is the line 28 : top.frames['Pop'].location.href =window.open($(this).attr(‘href’));

    And here is the sample page where you can see the live error. http://agentcities.com/expand/index.htm
    Obviously the pop.php is not in live server yet, so, don’t worry if it really doesn’t pop-up. I tested with sample file there but the error still stays.

  12. Guest
    Guest August 27, 2013 at 8:20 pm |

    Hey, Any chance you have a quick way to make one of the columns be open by default??


  13. Michael
    Michael August 30, 2013 at 12:58 am |


    Try commenting out the return false; after the if statement in the js. It’s capturing ALL click events with the LI element, and overriding the default behaviour for a checkbox.

  14. Andreius
    Andreius September 11, 2013 at 6:12 pm |

    How can I make all nodes to be expanded on load? T

  15. gaurang
    gaurang September 24, 2013 at 12:40 pm |

    I’m confused by something. It seems that any child tags within an will not trigger the click event of the parent. For example, I took your source code and just put bold tags around the text Item A … after which, clicking it has no effect, though clicking to the right of it works. Effectively, you can’t have anything but text, otherwise you have dead zones in the hit area. Am I missing something?

  16. s.lily
    s.lily October 18, 2013 at 9:06 pm |

    Hi! This was very useful. Thank you! I am new with jquery, son I wonder how can I change the animation of the transition?

  17. empower network
    empower network November 1, 2013 at 5:01 pm |

    Heya just wanted to give you a quick heads up and let you know a few of the images aren’t
    loading properly. I’m not sure why but I think its a
    linking issue. I’ve tried it in two different internet browsers and both show the same

  18. Kevin
    Kevin November 5, 2013 at 10:11 pm |

    Great stuff here! I’m kind of new at all of this…I can’t get it to create multiple lists using this code on one page without a single button controlling the entire lists, or breaking it half way down the list where I’m trying to add a new button. No doubt because of something I don’t see lol

  19. Reeti
    Reeti November 13, 2013 at 8:52 pm |

    Hi Mike,
    Could you please send me complete code for the Demo shown in the atricle above.I am new to java. Could you please send me the complete code with JS/html and css codes so that result is same as shown in demo.
    If you could do it early,that would be great help.


  20. Jesse Schaaf
    Jesse Schaaf December 8, 2013 at 6:22 pm |

    Just courious but how would you make check boxes functional simular to your hack on activating links?

  21. alfonso
    alfonso December 11, 2013 at 8:47 pm |

    The elements that I add between some button or element file don’t work. Someone help me, please.

  22. Harley Osgood
    Harley Osgood January 4, 2014 at 9:31 pm |

    Hi, I want to use this how it is but by adding my own text but I cannot figure out how to add css and jquery to the html box. does it just go after the html? is there something I should add to the code so that the html box knows its not just reading html? I have an understanding of basic html and css but not within the same box.

  23. Visente
    Visente January 26, 2014 at 12:28 am |

    Hi. Any chance to make code which will start page with all nodes opened?

  24. Visente
    Visente January 26, 2014 at 6:38 am |

    Thanks for replay.
    Yea, it is simple, but just for your original code, however for your “UPDATE: Adding links inside the elements” code (which I need) is different from original code, and I can not figured out in that case how to do same thing in that code?
    Part which control that function in your updated code is:


    I tried many combination and did not find out any full-functional.

  25. Visente
    Visente January 26, 2014 at 10:53 am |

    Thank you jasalguero for answer.

    Yes, I understand what UPDATE section does. I use your UPDATE section as my “scripts.js” file – My “scripts.js” file contain just whole javascript code from your UPDATE section.

    However your original javascript (from section “3.Javascript” of your tutorial in the page, which have not “hack to add links inside the cv” ) and your javascript in UPDATE section of your code is different, NOT JUST for “Hack to add links inside the cv” part of javascript, but also in another sections of code (like in section “Create the button functionality” and also in first section of javascript which start with: “$(function prepareList()”

    I am trying to make that all my nodes be expanded on load, for your WHOLE UPDATE javascript code, not just for javascript code in section: 3.Javacript.

    In original code for control of stage for loading page you have:

    return false;

    - and for that case it is easy to make desirable change as you explained to me.

    however, in your “UPDATE code for control of stage for load page” you haven’t this javascript cod, instead you have:

    return false;

    My question is: how to achieve that all my nodes be expanded on load of the page, but in your code which is appear in: “UPDATE: Adding links inside the elements” section of this article, not for original code?

    Do you follow what I want to do and what is my problem? If not, just try to answer on my last question.

  26. Neil
    Neil January 31, 2014 at 2:51 pm |

    I’m not sure if this is a bug or if i’m not doing something correctly, but I’ve used a font with the items in the unordered list like this:
    But the collape button does not work as expected. It collapses the fonted headings on itself. Is there something I have done wrong?

  27. Kurt
    Kurt March 21, 2014 at 9:43 pm |

    What would I need to alter so that the parent elements close/toggle when a different parent element is selected. ie., I select Item A and it expands, I then click Item B which prompts Item A to close and Item B to open. – Thank You :)

  28. Andrew Leonard
    Andrew Leonard March 30, 2014 at 10:49 am |

    Very nice but can you explain in very simple language how to make hyperlinks work with in the expandable list
    I have to right-click and select “open” from the context sensitive menu
    You can see the problem here:

  29. Andrew Leonarde
    Andrew Leonarde March 30, 2014 at 7:00 pm |

    Thanks for replying and my apologies – I have found it now – but what I cannot get to work is getting the hyperlink to open up in the original window

  30. Zaid Khan
    Zaid Khan March 31, 2014 at 10:13 am |

    When I add hyper-links, it doesn’t expand or collapse on clicking the links. It’s only expanding when I click on the plus and minus signs. When I remove the link it works again. Please tell me how to fix this problem.

  31. Andrew Leonard
    Andrew Leonard March 31, 2014 at 10:50 am |

    I have worked out a way around my last problem by creating a left frame, the code now obeys this instruction “window.open($(this).attr(‘href’),’_self’);” and opens in the original frame
    But I have another problem, if I “bold” my “item A” then when I click on the “collapse All” button, everything disappears!
    see: http://www.andrew-leonard.co.uk/Expandale%20List%202/Index%20Frameset.htm
    Any ideas?

  32. Andrew Leonard
    Andrew Leonard April 11, 2014 at 6:11 pm |

    Can you have a look here: http://www.andrew-leonard.co.uk/bps/Fern%20Gazette/HTML/root/newgazette.htm
    the “+” marks do not come back
    It seems stuck on class li.collapsed.expanded

  33. JP
    JP April 16, 2014 at 10:39 am |

    This was an incredibly useful and helpful tutorial. Thank you, Jose. In building my own list, I have encountered a problem with the collapse all function when I have a hyperlink as one of the expandable headers. Specifically, the collapse all function will hide the hyperlink even though it should remain. I have created a jsfiddle which shows this: http://jsfiddle.net/jpinksta/R7zaT/. If I delete the anchor tags around the hyperlink, the collapse all function (and all the other expand and collapse functions) work perfectly — however, the link is no longer a hyperlink. Does anyone have any suggestions for fixing this? Thanks in advance. And thank you to Jose once again for such a great tutorial. Much appreciated.

Leave a Reply