StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Without using JavaScript you're limited to using CSS transitions, where available. And while these are pretty impressive, they're not particularly great, so far as I've yet found, for conditional animation; they can basically animate from a starting point to another point and then back (based on the native browser events available in the browser itself), with JS you could add/remove additional classes and have the <code>div</code> elements move around to your heart's content, but not with 'just' CSS (though I'd love to be proven wrong on this).</p> <p>The best I've been able to come up with, so far, is:</p> <pre><code>#left { float:left; width:200px; } .right { height: 0; background-color: #fff; margin-left: 205px; overflow: hidden; -webkit-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; -moz-transition: all 1s linear; transition: all 1s linear; } .right:target { display: block; height: 5em; background-color: #ffa; -webkit-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; -moz-transition: all 1s linear; transition: all 1s linear; } </code></pre> <p><a href="http://jsfiddle.net/davidThomas/NhanG/2/" rel="nofollow">JS Fiddle demo</a>.</p> <p>And this doesn't slide from the side (though you can do that if you want to) because it didn't look good, given the content re-reflow that was happening as the width of the element changed.</p> <hr /> <p><strong>Edited</strong> because I think I may have misinterpreted a portion of the original question:</p> <blockquote> <p>...I'd like without any javascript</p> </blockquote> <p>That being the case, and the comment (below) seems to suggest that jQuery's an okay option, this might be worthwhile as a demonstration:</p> <pre><code>$('#left a').click( function(){ var div = $('div').not('#left').eq($(this).index('#left a')); var others = $('div[data-visible="true"]'); others.each( function(){ $(this).animate({ 'left' : '2000px' },1000,function(){ $(this).removeAttr('style data-visible'); }); }); if (div.attr('data-visible')) { div.animate({ 'left' : '2000px' },1000,function(){ $(this).removeAttr('style data-visible'); }); } else { div.animate({ 'left' : '210px' },1000).attr('data-visible',true); } }); </code></pre> <p><a href="http://jsfiddle.net/davidThomas/NhanG/3/" rel="nofollow">JS Fiddle demo</a>.</p> <p>References:</p> <ul> <li><a href="http://api.jquery.com/animate/" rel="nofollow"><code>animate()</code></a>.</li> <li><a href="http://api.jquery.com/attr/" rel="nofollow"><code>attr()</code></a>.</li> <li><a href="http://api.jquery.com/attribute-equals-value-selector/" rel="nofollow"><code>[attribute="value"]</code> selector</a>.</li> <li><a href="http://api.jquery.com/click/" rel="nofollow"><code>click()</code></a>.</li> <li><a href="http://api.jquery.com/each/" rel="nofollow"><code>each()</code></a>.</li> <li><a href="http://api.jquery.com/eq/" rel="nofollow"><code>eq()</code></a>.</li> <li><a href="http://api.jquery.com/index/" rel="nofollow"><code>index()</code></a>.</li> <li><a href="http://api.jquery.com/not/" rel="nofollow"><code>not()</code></a>.</li> <li><a href="http://api.jquery.com/removeAttr/" rel="nofollow"><code>removeAttr()</code></a>.</li> </ul>

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