1

I'm using the HTML5 tag details for a FAQ section of a company. An issue was that if the user opened another question the other question would not close automatically. Therefore I searched on the web and found the following solution:

function thisindex(elm){
      var nodes = elm.parentNode.childNodes, node;
      var i = 0, count = i;
      while( (node=nodes.item(i++)) && node!=elm )
        if( node.nodeType==1 ) count++;
      return count;
    }

    function closeAll(index){
      var len = document.getElementsByTagName("details").length;

      for(var i=0; i<len; i++){
        if(i != index){
          document.getElementsByTagName("details")[i].removeAttribute("open");
        }
      }
    }

This code does work properly in some sense but it has some small issues. Sometimes it opens two questions at the same time and works funny. Is there a method so this can work properly? This should work on desktop, tablet and mobile.

NOT DESIRED EFFECT: enter image description here

I created a fiddle http://jsfiddle.net/877tm/ with all the code. The javascript is doing it's work there, ig you want to see it live click here.

Toto
  • 89,455
  • 62
  • 89
  • 125
Daniel Ramirez-Escudero
  • 3,877
  • 13
  • 43
  • 80

5 Answers5

6

Since you tagged jQuery, you can just do this:

$('.info').on('click', 'details', function () {
    $('details').removeAttr('open');
    $(this).attr('open', '');
});

All this does is remove the open attribute of all detail tags when you click on any detail, and then reopen the one you just clicked on.

http://jsfiddle.net/877tm/3/

MattDiamant
  • 8,561
  • 4
  • 37
  • 46
  • This codes works smoothly. The only issue I'm finding myself is that once I add this code it works with desktop but with the ipad it just does not open the detail anymore... It highlights but it does not open the selected detail. Why is it different on the ipad? iPad works well with jQuery right? – Daniel Ramirez-Escudero Nov 18 '13 at 15:24
  • just checked and it's not the ipad but the browser. Safari= the detail does not even open. Firefox&Opera= The other open detail does not close. Chrome=Works fine. Any idea why? – Daniel Ramirez-Escudero Nov 18 '13 at 15:28
1

  1. the hole thisindex function is stupid and can be removed. You can simply pass the details element to closeAll.

  2. The closeAll is quite stupid, too it searches for details in the for loop, wow.

// closeAll

function closeAll (openDetails){
    var details = document.getElementsByTagName("details");
    var len = details.length;
    for(var i=0; i<len; i++){
        if(details[i] != openDetails){
            details[i].removeAttribute("open");
        }
    }
}

In case you want write clean code.

  1. You should use $.on or addEventlistener.
  2. Try to be in a specific context and only manipulate details in this context. (What happens, if you want to have two accordion areas. Or some normal details on the same site, but not inside of the group.)
  3. Only search for details in the group, if details was opened not closed.
  4. Give the boolen open property some love, instead of using the content attribute

I made small fiddle, which trys to do this.

alexander farkas
  • 13,754
  • 4
  • 40
  • 41
  • The code you gave me does not work :( As details is giving me a lot of problems do you have a recomendation how to recreate this effect with CSS or jQuery? – Daniel Ramirez-Escudero Nov 18 '13 at 15:38
  • Actually, the code works. See here: http://jsfiddle.net/f9fVf/5/ and here for a polyfilled version: http://jsfiddle.net/trixta/877tm/7/ – alexander farkas Nov 18 '13 at 15:53
  • Got it! If you do `details[i].open = false;` or `details[i].open = true;` it works. – Gal Jan 22 '16 at 09:18
  • Try to be less condescending towards others. If you feel code could be better, be specific in how it could be better, rather than calling others' work "stupid" and condescendingly saying "wow." – Chris Moschini May 11 '21 at 23:03
0

To make details as accordion tag you can use below jquery.

$("#edit-container details summary").click(function(e) {
    var clicked = $(this).attr('aria-controls');
    closeAll(clicked);
});
function closeAll (openDetailid){
      $("#edit-container details" ).each(function( index ) {
        var detailid = $(this).attr('id');
        var detailobj = document.getElementById(detailid);
          if (openDetailid != detailid ) {
           detailobj.open = false;
          }
       });
      $('html, body').stop().animate({ scrollTop: $('#'+openDetailid).offset().top -100 }, 1000);
  }
Vinodhini
  • 1
  • 1
0

I had an issue with the answer provided by @MattDiamant where Firefox was removing the open attribute but was not putting the open attribute on the selected detail. I made a small change to his code so it targeted the ID of the currently selected detail element.

Now when I click on a <details> element then click on another, it collapses the first element and displays the second.

$('details').click(function(e){
    $('details').removeAttr('open');
    $(e.currentTarget.id).attr('open', '');
});
JStrother
  • 1
-1

I have a solution with jQuery

$('details').on('click', function(ev){ //on a '<details>' block click
        ev.preventDefault(); //prevent the default behavior
        var attr = $(this).attr('open');
        if (typeof attr !== typeof undefined && attr !== false){ //if '<details>' block is open then close it
            $(this).removeAttr('open');
        }else{ // if '<details>' block is closed then open the one that you clicked and close all others
            var $that = $(this); //save the clicked '<details>' block
            $(this).attr('open','open'); //open the '<details>' block
            $('details').each(function(){ //loop through all '<details>' blocks
                if ($that.is($(this))){ //check if this is the one that you clicked on, if it is than open it or else close it
                    $(this).attr('open','open');
                }else{
                    $(this).removeAttr("open");
                }
            });
        }
    });
Nagy Istvan
  • 202
  • 3
  • 12