HTML space format affecting JavaScript/CSS

Question

What is happening...if you change the spacing or line breaks between different tags within the HTML, it causes problems for the JavaScript or CSS (not really sure which one).

The code itself is a basic collapsible list using only HTML, JavaScript, and CSS. I realize you can do this with jquery etc etc. Just trying to get an explanation for this code. If you click on the jsfiddle link below, run it, and click on the title it will expand and collapse on click. Tidy or change the spacing and run again - disappears on click.

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 would be greatly appreciated.

-

Original code goes to "Th0rndike" at the post below.

how to get collapsible listview for android using phonegap

Answer 1

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

clickedTitle.parentNode.childNodes[1];

what you really want is the children[1]

so you could change the code to this

clickedTitle.parentNode.children[1];

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

What is the difference between children and childNodes in JavaScript?