HTML Space Format Affecting JavaScript / CSS

Question

What happens ... if you change the spacing or line breaks between different tags in HTML, this creates problems for JavaScript or CSS (not quite sure which one).

The code itself is a basic collapsible list using only HTML, JavaScript and CSS. I understand you can do this with jquery etc. Just try to get an explanation for this code. If you click on the jsfiddle link below, launch it and click on the name, it will expand and collapse when clicked. Remove or change the interval and start again - disappears when pressed.

http://jsfiddle.net/7WPs6/46/

HTML

<div class='collapsibleCont'><h3 id='collapsible1' class='collapsibleTitle' onclick="handleCollapsible('collapsible1')">+ title</h3><p style="display:none" class='collapsibleContent'>hello</p> 

Javascript

 function handleCollapsible(id) { var clickedTitle = document.getElementById(id); var contentC = clickedTitle.parentNode.childNodes[1]; if (contentC.style.display == 'none') { contentC.style.display = 'block'; var mysplittedtitle = clickedTitle.innerHTML.split(" "); var newTitle = "- " + mysplittedtitle[1]; clickedTitle.innerHTML = newTitle; } else { contentC.style.display = 'none'; var mysplittedtitle = clickedTitle.innerHTML.split(" "); var newTitle = "+ " + mysplittedtitle[1]; clickedTitle.innerHTML = newTitle; } } 

Any help or thoughts are appreciated.

-

The original code is sent to "Th0rndike" in the message below.

how to get a collapsible listview for android using a phone screen saver

Answer 1

when changing the space or adding a new line you will change childNode

 clickedTitle.parentNode.childNodes[1]; 

what you really want is children[1]

so that you can change the code to this

 clickedTitle.parentNode.children[1]; 

for the bigger difference between childNode and children you can see this link:

What is the difference between children and childNodes in JavaScript?

Answer 2

Adding spaces changes what childNodes[1] is in the DOM. It is more reliable and is not affected by spaces.

 var contentC = clickedTitle.parentNode.getElementsByClassName("collapsibleContent")[0]; 

http://jsfiddle.net/7WPs6/50/

Answer 3

because you tokenize the string based on space and then use the second tokenized string to update the header in this code:

 var mysplittedtitle = clickedTitle.innerHTML.split(" "); var newTitle = "- " + mysplittedtitle[1]; 

adding a space changes the location of the title bar. Please note if you added a space after your "title" and did not disappear, since you did not change which element of the "title" string array is.

One way to fix this is to add a span around the "title", like this:

 <div class='collapsibleCont'> <h3 id='collapsible1' class='collapsibleTitle' onclick="handleCollapsible('collapsible1')"> + <span id="title">title</span> </h3> <p style="display:none" class='collapsibleContent'>hello</p> </div> 

and then change your javascript to

 function handleCollapsible(id) { var clickedTitle = document.getElementById(id); var contentC = clickedTitle.parentNode.childNodes[1]; if (contentC.style.display == 'none') { contentC.style.display = 'block'; var mysplittitle = document.getElementById("title").innerHTML(); var newTitle = "- " + mysplittitle; clickedTitle.innerHTML = newTitle; } else { contentC.style.display = 'none'; var mysplittitle = document.getElementById("title").innerHTML(); var newTitle = "+ " + mysplittitle; clickedTitle.innerHTML = newTitle; } } 

http://jsfiddle.net/5fdo2yzt/