StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If you were willing to use jQuery, the selector of your interest is something along the lines of</p> <pre><code>$('div#parent-container > div').filter(':visible'); </code></pre> <p>For example, if I were to demonstrate with next & previous, I would do it <a href="http://jsfiddle.net/DSKVR/shgfT/" rel="nofollow">something like this</a>. With targeted links it would work by appending ID's to the <code>divs</code> and referencing those in the <code>href</code> attribute of `anchors'. (now included within example)</p> <hr> <p>Something to <a href="http://jsfiddle.net/DSKVR/shgfT/" rel="nofollow">mess with</a>:</p> <pre><code>$(function(){ //Reference Object var $divs = $('div > div'); //Buffer for selected variable var $selected = 0; //Show first $divs.eq(0).show(); $('#next').click(function(){ //Update selected var $selected = $divs.filter(':visible'); //Save next to variable var $next = $selected.next(); //Change Visibility toggle($next); //Prevent Default return false; }); $('#prev').click(function(){ $selected = $divs.filter(':visible'); var $prev = $selected.prev(); toggle($prev); return false; }); $('a').click(function(){ $selected = $divs.filter(':visible'); var selector = $(this).attr('href'); if(selector == '#') return false; toggle( $( selector ) ); return false; }); var toggle = function($toggle){ if(!$toggle.length) return false; $selected.hide(); $toggle.show(); } }); </code></pre> <hr> <pre><code> <a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a> <a href="#item-4">Show Item Four</a> <div> <div id="item-1">One</div> <div id="item-2">Two</div> <div id="item-3">Three</div> <div id="item-4">Four</div> <div id="item-5">Five</div <div id="item-6">Six</div> </div> </code></pre> <hr> <pre><code>div > div { font-size:5em; width:auto; text-align:center; padding:20px 0; display:none; } </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