StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>For a pure CSS solution <code>:target</code> will work for you.</p> <p><a href="http://jsfiddle.net/Tyriar/TzhPx/" rel="nofollow">jsFiddle</a></p> <pre><code>div { display:none; } div:target { display:block; } </code></pre> <p>As for a show all button, you can augment this CSS with a JavaScript button that will add a class to force the display of all the divs.</p> <p><a href="http://jsfiddle.net/Tyriar/8D6YQ/" rel="nofollow">jsFiddle</a></p> <p><strong>JavaScript</strong></p> <pre><code>var showAll = document.getElementById('show-all'); showAll.onclick = function () { var divs = document.querySelectorAll('div'); for (var i = 0; i < divs.length; i++) { divs[i].className = 'force-show'; } } </code></pre> <p><strong>CSS</strong></p> <pre><code>div { display:none; } div:target, div.force-show { display:block; } </code></pre> <h2>Support</h2> <p>IE8 and below don't support <code>:target</code>, if IE8 support is vital then you will probably want to go for more of a JavaScript solution.</p> <p><a href="http://jsfiddle.net/Tyriar/qVuZv/" rel="nofollow">jsFiddle</a></p> <pre><code>var showAll = document.getElementById('show-all'); var divs = document.querySelectorAll('div'); var links = document.querySelectorAll('a[href^="#"]'); showAll.onclick = function () { for (var i = 0; i < divs.length; i++) { divs[i].className = 'force-show'; } } for (var i = 0; i < links.length; i++) { links[i].onclick = (function (i) { return function () { hideAllDivs(); var linkDiv = document.getElementById(links[i].getAttribute('href').slice(1)); linkDiv.className = 'force-show'; } })(i); } function hideAllDivs() { for (var i = 0; i < divs.length; i++) { divs[i].className = ''; } } </code></pre>

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