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

Andy Hoffman · Answer 1 · 2016-04-21T18:43:13.923

1

Adding spaces changes what childNodes[1] is in the DOM. This is more reliable and isn't affected by spaces.

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

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

edited Apr 21 '16 at 18:43

answered Apr 21 '16 at 18:36

Andy Hoffman

18,436
4
42
61

score 1 · Accepted Answer · edited May 23 '17 at 12:23

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?

edited May 23 '17 at 12:23

Community

1
1

answered Apr 21 '16 at 18:36

Hugo S. Mendes

1,076
11
23

Steve · Answer 3 · 2016-04-21T19:11:58.843

because you are tokenizing the string based on a space and then using the second tokenized string for updating the title in this code:

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

adding a space changes the location of the title string. Notice if you add a space after your "title" and it doesn't disapear, since you haven't changed what element of the string array "title" is in.

one way to fix it would be add a span around "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>

then change your javascript to this

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/

HTML space format affecting JavaScript/CSS

3 Answers3