Die HTML5 Specificationen detail und summary

Häufig möchte man Texte bedingt anzeigen. D.h. es soll nur eine Überschrift gezeigt werden und der Anwender klappt bei Interesse den zugehörigen Text duch einen Klick in die Überschrift auf oder zu.
Die neue HTML5 Spezifikation trägt diesem Wunsch Rechnung mit den 2 neuen zusammengehörigen Tags <details> und <summary> .
Die erste Detailangabe ist dabei geöffnet, alle anderen sind zugeklappt, es sei denn sie haben im details Tag ein open-Attribut (boolsches Attribut einfach nur <summary open>, in XHTML open="open" ).
Leider unterstützt bisher nur Webkit diese Funktionalität. Alle anderen Browser zeigen die kompletten Texte an. Deshalb wird dafür eine javascript Fallbacklösung benötigt.

    
    <details>
    <summary>Text der Überschrift>/details>
    <div>           <!--  wird nur benötigt, um alles per javascript auszublenden -->
    
    </div>
    </details>
 

der DOM tree ist vereinfacht :

				details
		_________|___________________________
		|									|
		summary 								DIV
							   __________|_________
							   								|                                  |
                          childNodes                    attributes
                ______________|___________                   |
               |              |           |            title = 'The test paragraph'
'This is a sample of some '   B   ' in your document'
                              |
                          childNodes
                    __________|_______
                   |          |       |
           'HTML you might'   BR   'have'

details und summary können mittels css beeinflußt werden.
So kann der OriginalPfeil durch ein + oder - ersetzt werden und das funktioniert dann auch ohne Javascript.

<style>
.summary_hidden {display: none; } 	/** für Ausblendung per javascript */
.summary_display {display: block; } /** für Einblendung per javascript */

summary {display:block; 
		background-color: lightgray; 
		font-weight:bold; 
		margin-bottom:5px;
		padding-bottom: 5px;
		}
summary::-webkit-details-marker {
    display: none;
    }
     
details summary:after {  		 /** ersetzt den Pfeil durch ein + Zeichen */
    content: "+";				 /** BENÖTIGT KEIN JAVASCRIPT */	
    float: left;
    margin-right: 5px;
    margin-left: 5px;
    }
     
details[open] summary:after {  /** ersetzt den Pfeil durch ein - Zeichen */
      content: "-";
    }
</style>

//======================================================================== 
// neue  HTML5 - Elemente  details, summary
// diese werden noch nicht von allen Browsern NATIV UNTERSTÜTZT (bisher nur webkit)
// Es ist deshalb ein javascript Fallback erforderlich
//
//======================================================================== 
	
	
/*
* Firefox, and most other browsers, will treat empty white-spaces or new lines as text nodes, 
Internet Explorer will not. So, in the example below, we have a function that checks the
node type of the next sibling node.
1 	ELEMENT_NODE
2 	ATTRIBUTE_NODE
3 	TEXT_NODE
4 	CDATA_SECTION_NODE
5 	ENTITY_REFERENCE_NODE
6 	ENTITY_NODE
7 	PROCESSING_INSTRUCTION_NODE
8 	"summary_hidden"COMMENT_NODE
9 	DOCUMENT_NODE
10 	DOCUMENT_TYPE_NODE
11 	DOCUMENT_FRAGMENT_NODE
12 	NOTATION_NODE
 
*/
function getNextsibling(n) {
	var sib=n.nextSibling;
	while (sib.nodeType != 1)  {  
		sib=sib.nextSibling;
	 }
	return sib;
}


/**
* summaryClick ist der Eventhandler der das auf- und zuklappen des 
* p tags in dem detail Tag durchführt.
* dazu wird dem p-Tag eine css Klasse verpasst.
*/
function summaryClick(e){
	 if(!e) e = window.event;
	 var targ=e.currentTarget;
	 var divNode=targ.nextElementSibling; 
	 
	if(divNode.className == "summary_hidden"){
		removeClass(divNode,"summary_hidden");
		setClass(divNode,"summary_display");
		targ.parentElement.setAttribute("open","open");
	}
	else {
		removeClass(divNode,"summary_display");
		setClass(divNode,"summary_hidden");
		if(targ.parentElement.getAttribute("open")) targ.parentElement.removeAttribute("open");
	}
}

/**
*  checkSummary sollte im init aufgerufen werden. 
*  Es fügt die erforderlichen css-Klassen und eventhandler hinztu. 
*/
function checkSummary(){
	 var summary=document.getElementsByTagName("SUMMARY");
	 var i,detail;
	 var divNode;
	 
	 for(i=0;i0) setClass(divNode,"summary_hidden");
		 else detail.setAttribute("open","open");

		 addEvent(summary[i],"click",summaryClick);
	 }
}

function addEvent( obj, type, fn ){
   if (obj.addEventListener) {
      obj.addEventListener( type, fn, false );
   } else if (obj.attachEvent) {
      obj["e"+type+fn] = fn;
      obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
      obj.attachEvent( "on"+type, obj[type+fn] );
   }
}
function init_prog(){
	checkSummary();
}
window.onload=init_prog;
}