Expand and collapse script

*I am trying to figure out the use of these functions. Anybody knows Why they are used and Can you give me an example with an HTML tag? Thanks in advance

Your code so far

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 >

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36.

Link to the challenge:
https://www.freecodecamp.org/challenges/chaining-if-else-statements

Where did you get this code? It is not valid JavaScript syntax. This sounds like a homework problem. If not, then I am not sure why there would be no documentation or code examples using the functions. Is it part of a library?

Hi, thanks for replying. Recently I worked on a tool (html, css and JavaScript) and between the several functions those are some that I didn’t understand. The tool is simple made of Divs, text forms, radio bottons and checkboxes, in order to insert text or select options. This tool has several links on the top: collapse/open all div boxes, refresh and reset function and a preview link (to check the output of your input data).

I just was wondering what was the logic behind the functions above, that I couldn’t figure out, with the intent of reusing it.