a BR inside a SPAN remains visible after I COLLAPSE the visibility of the SPAN

Question

This piece of HTML:

<table>
  <tr>
    <td> 1 </td>
    <td> 2167 </td>
    <td> Cliff Richard & the Shadows
      <span onclick='Expl(1)'> 
      *) 
      <span id=c1 style='visibility:collapse';> 
        <br>Composed of:  
        <br> - Cliff Richard & the Shadows 
        <br> - Cliff Richard 
        <br> - Shadows 
      </span>
      </span>
    </td>
    <td onclick='iLnk(196702)'> 1 </td>
    <td> 86 </td>
  </tr>

</table>

shows the <br> tags, even though the span has visibility collapse. If I change visibility to "visible" (in the routine Expl(1)), the text appears as it should, respecting the breaks.

What do I have to change (if possible) to NOT see the br tags when I collapsed them?

Debug screen:

***But only if the element is a table element*** - use display:none to not see the space, use visibility:hidden to still take up space — mplungjan, May 11 '20 at 18:03
Display: none hides everything, just as I wanted. What is the Display attribute to show all text? In other words: If I want to flip from visible to invisible, I code "display: none" for the latter, but what is the code for the first? — Martin, May 11 '20 at 18:11
Best is to toggle a class: `document.getElementById("c1").classList.toggle("hiddenClass",reasonToHide)` — mplungjan, May 11 '20 at 18:13
It works well for me with display:none and display: contents. If you want to earn yout reward, publish is as an answer, thanks — Martin, May 11 '20 at 18:20
Yeah! You supply that AND the css `hiddenClass { display:none}` — mplungjan, May 11 '20 at 18:20
No need. The question is dupe and does not need to be retained — mplungjan, May 11 '20 at 18:21
Martin, if you make your debug window a bit wider, you should see a "computed" tab next to the "styles" tab. You can use that to look at any element's properties, and what is trying to set it. You can see the default values in there, but in case you have difficulties finding that, the default value for a span is `inline`. — Robert McKee, May 11 '20 at 18:34
reasonToHide is a statement in your code. For example `document.getElementById("c1").classList.toggle("hiddenClass",expl===1)` — mplungjan, May 11 '20 at 18:52
It worked well for me with display:none and display: contents. But only in Chrome and Firefox. Edge refuses to recognise "contents" and wants "" instead. ATTENTION. — Martin, May 17 '20 at 11:22

Robert McKee · Answer 1 · 2020-05-11T18:14:08.247

visibility:collapse only works on table elements, not spans. On any element other than a table element, it acts exactly like visibility:hidden, which forces the element to keep all the space it otherwise would.

You are probably looking for display: none which will completely remove the element's size.

* { outline: 1px solid red }

<table>
  <tr>
    <td> 1 </td>
    <td> 2167 </td>
    <td> Cliff Richard & the Shadows
      <span onclick='Expl(1)'> 
      *) 
      <span id=c1 style='visibility:collapse'> 
        <br>Composed of:  
        <br> - Cliff Richard & the Shadows 
        <br> - Cliff Richard 
        <br> - Shadows 
      </span>
      </span>
    </td>
    <td onclick='iLnk(196702)'> 1 </td>
    <td> 86 </td>
  </tr>

</table>

vs

* { outline: 1px solid red }

<table>
  <tr>
    <td> 1 </td>
    <td> 2167 </td>
    <td> Cliff Richard & the Shadows
      <span onclick='Expl(1)'> 
      *) 
      <span id=c1 style='display:none'> 
        <br>Composed of:  
        <br> - Cliff Richard & the Shadows 
        <br> - Cliff Richard 
        <br> - Shadows 
      </span>
      </span>
    </td>
    <td onclick='iLnk(196702)'> 1 </td>
    <td> 86 </td>
  </tr>

</table>

It’s a dupe and already closed as such – mplungjan May 11 '20 at 18:14 — mplungjan, May 11 '20 at 18:14

a BR inside a SPAN remains visible after I COLLAPSE the visibility of the SPAN

1 Answers1