Valid xhtml 1.0 strict JS toggle without speculative parsing error

Question

i know there are tons of toggle-scripts out there, but i couldn't find any to fit my needs so far. It should be:

valid xhtml 1.0 strict
valid css 2.1 / functional for browsers without css 3
visible to users without javascript (just visible... no toggle)
don't cause a speculative parsing error (firefox/gecko console)
if possible don't load a whole scriptlibrary from somewhere just for this tiny toggle function

Speculative parsing error happens when within a JavaScript section some incomplete html is written (e.g. tag not closed).

See this example, which causes speculative parsing error and flickering content while loading:

function toggle(ID) {     
 var ele = document.getElementById(ID);
 
 if(ele.style.display == "block") {
   ele.style.display = "none"; } 
 else { 
   ele.style.display = "block"; } 
}

<a href="javascript:toggle('content')">Content Toggle Linktext</a>

<script type="text/javascript">
 /* <![CDATA[ */
 document.write('<div id="content" style="display:none;">');
 /* ]]> */
</script>

<p>Content blablabla</p>

<script type="text/javascript">
 /* <![CDATA[ */
 document.write('<\/div>');
 /* ]]> */
</script>

So how to achieve my needs? Maybe i need a completely new approach? Thanks, Stony

This is precisely why document.write was deprecated. You should use `if (something) container.innerHTML = (complete div); else container.innerHTML = (only the p);` in one monolithic JavaScript block. — Mr Lister, Apr 05 '16 at 13:59
I didn't try yet, but am i right, that in this case the content won't show for users without javascript, because the whole script won't be executed, but the content is in the script? I'm a JS beginner... — Stony, Apr 05 '16 at 14:21

Stony · Accepted Answer · 2016-04-05T18:31:21.990

Ok i think I've found a solution by myself at this blog comment which works very well at the moment and makes the html much easier to read. The script is loaded in the header.

/* JavaScript */
function toggle(ID) {   
    var ele = document.getElementById(ID);

    if (ele.style.display === "block") {
            ele.style.display = "none"; }
    else {
            ele.style.display = "block"; }
}

document.documentElement.className += " CssClassJsLoad";
// writes the classname "CssClassJsLoad" into the <html>-tag to make sure document is completely loaded by browser before parsing starts

/* CSS */
.CssClassJsLoad .JsHide {
    display:none; }
/* For all objects within both of these classes: Do not display.
Remember: the <html>-tag only gets the class "CssClassJsLoad" if JS is present or respectively successfully executed. So if JS is not present, display will be standard as "block" element */

<!-- HTML -->
<a id="content-link" href="javascript:toggle('content')">Content Toggle Linktext</a>

<div class="JsHide" id="content">
  <p>Content Text blablabla. Inherits class "JsHide" from surrounding div and "CssClassJsLoad" from surrounding html-tag</p>
</div>

Valid xhtml 1.0 strict JS toggle without speculative parsing error

1 Answers1