Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>edit - i also run chrome. here, open notepad and save this as a .html file, make sure you specify utf-8 encoding </p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;link rel="stylesheet" type="text/css" media="all" href="http://www.randomsnippets.com/wp-content/themes/twentyeleven/style.css" /&gt; &lt;head&gt; &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; function showonlyone(thechosenone) { $('div[name|="newboxes"]').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).show(200); $(this).parent().children(":first-child").css('background-color','#00FFFF'); } else { $(this).hide(600); $(this).parent().children(":first-child").css('background-color','#99CCFF'); } } }); }&lt;/script&gt; &lt;/head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;body&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt; &lt;div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;"&gt; &lt;a id="myHeader1" href="javascript:showonlyone('newboxes1');" &gt;show this one only&lt;/a&gt; &lt;/div&gt; &lt;div name="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;"&gt;Div #1&lt;/div&gt; &lt;/td&gt; &lt;td&gt; &lt;div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;"&gt; &lt;a id="myHeader2" href="javascript:showonlyone('newboxes2');" &gt;show this one only&lt;/a&gt; &lt;/div&gt; &lt;div name="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;"&gt;Div #2&lt;/div&gt; &lt;/td&gt; &lt;td&gt; &lt;div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;"&gt; &lt;a id="myHeader3" href="javascript:showonlyone('newboxes3');" &gt;show this one only&lt;/a&gt; &lt;/div&gt; &lt;div name="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;"&gt;Div #3&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; ​ </code></pre> <p>if this doesnt work, there could be a problem with your computer,because this exact copy works for me, run locally. </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload