跨度标记和嵌套跨度标记中的文本未显示

Question

I previously asked a similar question, but I did more research and found the more specific issue. I want to show text inside the span tag so that the div elements also inside it (which each has a checkbox) show up on the screen.

I tried adding a test image inside both the first and second span tag and it shows on the screen. But the text in both is not showing. It should show up as "Countries + " in the checkbox-div box. When I put the image inside location-div the image does not display. The only thing that shows up is the button-like "Clear" reset element. As in this picture: button-like element with "Clear" label inside checkbox-div bordered box , despite it showing in the running code snippet.

I also tried adding style='display:block' inside all span tags. Then I tried adding that inside only the inner span tags as an answer to a question suggested, but it didn't work either.

 function expand(element) { var list = element.nextElementSibling; var symbol = element.firstElementChild; if (list.style.display == 'block') { list.style.display = 'none'; symbol.innerHTML = '+'; } else { list.style.display = 'block'; symbol.innerHTML = '−'; } }

 #checkbox-div { max-height: 500px; overflow-y: auto; overflow-x: hidden; width: 200px; border: 1px solid #cccccc; padding: 2px; float: left; }.location-div { margin-left: 10px; display: none; } label { position: relative; margin-left: -20px; padding-right: 20px; left: 20px; }.expand { display: block; cursor: pointer; }.expand-symbol { font-weight: bold; }

 <div id='checkbox-div'> <form id='location-form' action="javascript:void(0);"> <span class='expand' onclick='expand(this)'>Countries <span class='expand-symbol'>+</span> </span> <.-- begin long line --> <div class='location-div'> <input type='checkbox' id='Albania' class='location-checkbox'><label for='Albania'>Albania</label> <br> <input type='checkbox' id='Algeria' class='location-checkbox'><label for='Algeria'>Algeria</label> <br> <!-- Etc. other countries --> <br> <input type='checkbox' id='Zimbabwe' class='location-checkbox'><label for='Zimbabwe'>Zimbabwe</label> <br> </div><input type='reset' value='Clear'> <!-- end long line --> </form> </div>

There is that very long line with line breaks because it is created in a for loop and with echo's in php before and after the loop, I added the paragraph spaces so it's easier to read.

The expand function that once the "Countries + " is clicked, should show all the checkboxes underneath "Countries - ". This function works on another page that I tested, but I haven't been able to test it on the page I'm working on yet since "Countries + " doesn't show, despite it working in this code snippet.

Answer 1

nextSibling returns any next text node, comment node, or element node, thanks to Cbroe who pointed that out in the comments. I changed it to nextElementSibling to only get the next element.

Also thanks to Dionys who made me realize it had to do with some css hiding the expand. My body css was originally like so:

body{
    min-width: 1010px;
    font-size: 0px;
    font-family: Arial, Sans-Serif;
    margin-left: 6px;
}

When I removed min-width: 1010px; the text in the span showed up now.