Tyler Uebele



  1. Thank you for this.
  2. There are many problems with this script to use it in a project.

    It kills the existed "onclick" of "details".
    It doesn't work when post-loading with AJAX.
  3. Paul,
    Thank you for the feedback. I have corrected the two issues you mentioned.

    For the first I replaced the old style "onclick = " with a call to "addEventListener()".
    For the second, I made it safe to call details_shim() again. You would have to add a call to this at the end of your Ajax success handler. Is there a way to make that more automatic?
  4. Your script "just works" and actually doesn't interfere with chrome, and even magically fixes styling for firefox so it applied my css and now everything looks consistent in each browser. Thanks man!
  5. mkkot,

    "Just works" is what I was shooting for. I'm glad you're pleased!
  6. It works perfectly!
  7. Now you must make the high jump:

    Implement DetailsElement.open property for javascript usage.

    Check this:

    PS: I love you anyway.
  8. Paul, Thanks for the additional suggestion. It really adds a lot to the shim. Revised code is posted on github. Tested on all browsers I have access to (win/mac).
  9. Thank you!!! You saved me! It worked great for me
  10. Works great! Thanks.
  11. This is exactly the solution I have been seeking for the past hour! Works brilliantly! I'm not worthy!
  12. Thanks pal, great work. Just what I was looking for.
  13. Thanks! Works like charm!!! :)
  14. This is a great drop in for people like me, who just assume that the latest browsers will support the very basics of HTML5 - like detail. I had already coded my website, using HTML5, and was horrified to find users were seeing this incorrectly styled spiel at the top of the page, which is meant to be hidden by default.
    I downloaded the zip from github and added the two lines to my index.py, and voila, Internet Explorer is fixed.
  15. Hi,
    Nice work very useful and lightweight.

    I intend to do an expand/collapse all button.
    But as open="" is not widely supported I use removeAttribute, which make disappear the Arrow and the ability to reopen détails when your script is in action (works on browsers that support nativly).

    Here is my solution, but if you could give a better one or adjust your script in order to be removeAttribute tolerant, it would be perfect :
    function expandAllDetails() {
    details = document.getElementsByTagName("details")
    for (i = 0; i < details.length; i++)
    details[i].setAttribute("open", "open")
    function collapseAllDetails() {
    details = document.getElementsByTagName("details")
    for (i = 0; i < details.length; i++)
    if ('boolean' == typeof details[0].open)
    details[i].removeAttribute("open") // Natively supported.
    details[i].setAttribute("open", "") // Unsupportive browsers.

    By the way, I have a french lab to test HTML5 support : http://html5demo.braincracking.org/demo/details.php
  16. In addition to my previous post, I noticed that my functions work swhen called directly in a script section :


    Bu it doesn't work anymore once used in a link or in a
    I had to change
    details[i].setAttribute("open", "open") // Works with direct call
    details[i].open = "open" // Works throught links button

    But I didn't manage for my CollapseAllDetails() function to works.

    Any help ?
  17. Hello, You can find a working expand/collapse all function in the demo page ( http://tyleruebele.com/details-shim/demo.html ), ( https://github.com/tyleruebele/details-shim/blob/master/demo.html#L12 ) which looks like this:

    function closeAll() {
    var i, a = document.getElementsByTagName('details');
    for (i in a) {
    a[i].open = '';
    function openAll() {
    var i, a = document.getElementsByTagName('details');
    for (i in a) {
    a[i].open = 'open';
  18. I love you!!! it works perfect to me. Brilliant :D thank you very muuuuuuuuuuuuuuuuuuch
  19. the greatest solution for details i ever sow it works excellent!
    thanks soooooow much!
  20. is there a way to put the entire script in your page?
  21. @brendan, I'm not sure what you're asking. Do you mean embed the source in the page instead of linking it with a [script src="..."] tag? You could probably copy the source into a script tag, you'd just want to make sure that script tag was at the bottom of your page.
  22. Thanks for this script. I thought by now this would work with Firefox, but found that at least on Firefox on my Mac, the tag didn't work. Your script fixes it, but I noticed it has a caveat. The page is as long as it was before the blocks all closed. Normally the page would be much shorter (I have a bunch of blocks that contain a bunch of data, so the menu they generate is longer when fully expanded than my content in most cases).
  23. @Phillip, I haven't observed that. If you can produce a demo of that behavior, I'd be happy to look into a fix/workaround.
  24. Your demo doesn't work for me with minified version only. (commenting out the first details-shim.js)

    Syntax error in minifier?
  25. I'm trying to get your solution to work with Drupal. In both Firefox and IE, the section is collapsed but does not show the content when clicked.

    Could this have something to do with all the extra markup that Drupal adds inside the and after the ?

  26. @frank I'm not able to reproduce the reported problem. Have you tried re-minifying my unminified script to see if you get a different result?
  27. @NodeTorious I haven't worked with Drupal, but I imagine if it adds markup, it might interfere. Do you have an example I can see to test?
  28. I am having problems creating an accordion version of the expandable (the one where only one panel can be open at the time. When you open another, first one closes).

    I got it working in Chrome using jQuery(used in our project anyway), but it just won't work with IE or Firefox.

    Any help would be appreciated.
  29. Comment Pending moderation
  30. Comment Pending moderation
  31. Comment Pending moderation
  32. Comment Pending moderation

Submit a Comment

moderation enabled