Tra cui un'opzione di crollo di JavaScript nella tua pagina Web consente di inserire un codice all'interno della tua pagina che causa il contenuto al collasso e poi riappaiono. Avendo tale funzione disponibile sulla tua pagina Web può rivelarsi utile se si dispone di contenuto specifico che si desidera evidenziare ma anche avere qualche informazione secondarie, supplementare che si desidera includere. È possibile includere le informazioni supplementari in una porzione pieghevole della pagina.

Istruzioni

1

Accedere al server Web e fare clic su per aprire la pagina HTML in cui si creerà una sezione comprimibile.

2

Fare clic all'interno della sezione "< head >" della pagina.

3

Inserire il seguente codice di crollo di JavaScript:

< script type = "text/javascript" >

var collapseDivs, collapseLinks;

Function createDocumentStructure (tagName) {

Se (Document. GetElementsByTagName) {

var elements = document.getElementsByTagName(tagName);

collapseDivs = new Array(elements.length);

collapseLinks = new Array(elements.length);

for (var i = 0; i < elements.length; i++) {

var element = elements[i];

var siblingContainer;

if (document.createElement &&

(siblingContainer = document.createElement('div')) &&

siblingContainer.style)

{

var nextSibling = element.nextSibling;

element.parentNode.insertBefore(siblingContainer, nextSibling);

var nextElement = elements[i + 1];

while (nextSibling != nextElement && nextSibling != null) {

var toMove = nextSibling;

nextSibling = nextSibling.nextSibling;

siblingContainer.appendChild(toMove);

}

siblingContainer.style.display = 'none';

collapseDivs[i] = siblingContainer;

createCollapseLink(element, siblingContainer, i);

}

else {

// no dynamic creation of elements possible

return;

}

}

createCollapseExpandAll(elements[0]);

}

}

Function createCollapseLink (elemento, siblingContainer, index) {

portata di var;

Se (document.createElement & & (span = {document.createElement('span')))

span.appendChild(document.createTextNode(String.fromCharCode(160)));

var link = document.createElement('a');

link.collapseDiv = siblingContainer;

link.href = '#';

link.appendChild(document.createTextNode('expand'));

link.onclick = collapseExpandLink;

collapseLinks[index] = link;

span.appendChild(link);

element.appendChild(span);

}

}

Function collapseExpandLink (evt) {

Se (this.collapseDiv.style.display = = ') {

this.parentNode.parentNode.nextSibling.style.display = 'none';

this.firstChild.nodeValue = 'expand';

}

else {

this.parentNode.parentNode.nextSibling.style.display = '';

this.firstChild.nodeValue = 'collapse';

}

Se (evt & & evt. preventDefault) {

evt.preventDefault();

}

restituire false;

}

Function createCollapseExpandAll (firstElement) {

var div;

Se (document.createElement & & (div = {document.createElement('div')))

var link = document.createElement('a');

link.href = '#';

link.appendChild(document.createTextNode('expand all'));

link.onclick = expandAll;

div.appendChild(link);

div.appendChild(document.createTextNode(' '));

link = document.createElement('a');

link.href = '#';

link.appendChild(document.createTextNode('collapse all'));

link.onclick = collapseAll;

div.appendChild(link);

firstElement.parentNode.insertBefore(div, firstElement);

}

}

Function expandAll (evt) {

per (var i = 0; i < collapseDivs.length; i + +) {

collapseDivs[i].style.display = '';

collapseLinks[i].firstChild.nodeValue = 'collapse';

}

Se (evt & & evt. preventDefault) {

evt.preventDefault();

}

restituire false;

}

Function collapseAll (evt) {

per (var i = 0; i < collapseDivs.length; i + +) {

collapseDivs[i].style.display = 'none';

collapseLinks[i].firstChild.nodeValue = 'expand';

}

Se (evt & & evt. preventDefault) {

evt.preventDefault();

}

restituire false;

}

< / script >

< script type = "text/javascript" >

Window. onLoad = function (evt) {

createDocumentStructure('h1');

}

< / script >

4

Inserire il codice seguente all'interno della sezione "< body >" della pagina:

< centro >< h1 > pieghevole sezione intestazione < / h1 >< p > pieghevole informazioni va qui.

Sostituire "Intestazione di sezione pieghevole" con il titolo della sezione che si desidera comprimere. Sostituire "pieghevole informazioni va qui" con le informazioni effettive che si desidera comprimere.

5

Pubblicare la pagina.