StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>While not the sharpest animation, I have enabled it to behave the way I think you're wanting by finding the parent and hiding all the siblings. I'm not sure yet why this slides the elements out to the left whereas a direct call to <code>.siblings()</code> doesn't seem to.</p> <p><a href="http://jsfiddle.net/92HXT/10/" rel="noreferrer">Seen here</a>.</p> <p>As others have mentioned, using classes to identify a group of items is the correct approach instead of by ID.</p> <p><strong>Update</strong>:</p> <p>While I'm still not sure why siblings() doesn't find the siblings to the div you've found by ID, I'm suspecting it has to do something with the process of showing / hiding or possibly even using the sliding animation. Here is my suggested jQuery/jQueryUI:</p> <pre><code>$('a.view-list-item').click(function () { var divname= this.name; $("#"+divname).show("slide", { direction: "left" }, 1000); $("#"+divname).parent().siblings(":visible").hide("slide", { direction: "left" }, 1000); }); </code></pre> <p>Here is the <a href="http://jsfiddle.net/92HXT/13/" rel="noreferrer">updated version</a>.</p> <p><strong>Update</strong>:</p> <p>An <a href="http://jsfiddle.net/92HXT/15/" rel="noreferrer">excellent update</a> to the solution by @jesus.tesh</p> <p><strong>Update</strong>:</p> <p>A <a href="http://jsfiddle.net/erwinjulius/CgM3x/" rel="noreferrer">behavior update</a> to the solution by @erwinjulius. I changed DIVs positioning so it behaves better, allowing user to click on links quickly without breaking the animation. Added white background and left-padding just for better effect presentation.</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