StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Put the text you want to hide until click inside hidden container, like this:</p> <pre><code><div id="HiddenTextContainer" style="display: none;"> Hello, I will become visible when you click something else </div> </code></pre> <p>Next step is add that JavaScript code to the page, for example inside the <code><head></code> section:</p> <pre><code>function ShowHiddenText() { document.getElementById("HiddenTextContainer").style.display = "block"; } </code></pre> <p>And finally have such code:</p> <pre><code><span onclick="ShowHiddenText();">click me to show hidden text</span> </code></pre> <p><a href="http://jsfiddle.net/JVYq7/" rel="nofollow">Live test case</a>.</p> <p><strong>Edit</strong>: in case you got more than one element to show, you can use the <code>rel</code> attribute:</p> <pre><code><span rel="HiddenTextContainer2">click me to show second hidden text</span><br /> </code></pre> <p>Then with pure JavaScript iterate over all elements with that attribute and assign their <code>onclick</code> programmatically:</p> <pre><code>window.onload = function() { var elements = document.getElementsByTagName("span"); for (var i = 0; i < elements.length; i++) { var element = elements[i]; var id = element.getAttribute("rel") || ""; if (id.length > 0) { element.onclick = function() { var oToShow = document.getElementById(this.getAttribute("rel")); if (oToShow) oToShow.style.display = "block"; }; } } }; </code></pre> <p>When clicked, element with ID the same as the <code>rel</code> value will be displayed.</p> <p><a href="http://jsfiddle.net/JVYq7/1/" rel="nofollow">Updated fiddle</a>.</p> <p><strong>Edit</strong>: to show it in one single container, first have such container:</p> <pre><code><div id="HiddenTextContainer"></div> </code></pre> <p>No need to have it hidden since it's initially empty, then change the code to:</p> <pre><code>window.onload = function() { var elements = document.getElementsByTagName("span"); for (var i = 0; i < elements.length; i++) { var element = elements[i]; var id = element.getAttribute("rel") || ""; if (id.length > 0) { element.onclick = function() { var oToShow = document.getElementById(this.getAttribute("rel")); if (oToShow) document.getElementById("HiddenTextContainer").innerHTML = oToShow.innerHTML; }; } } }; </code></pre> <p>Instead of showing the related container, you copy its contents to the "main" container.</p> <p><a href="http://jsfiddle.net/JVYq7/2/" rel="nofollow">Updated jsFiddle</a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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