Thursday, 19 September 2013

Removing an element from group but keeping "odd/even" state accurate

Removing an element from group but keeping "odd/even" state accurate

What are I am trying to achieve is fairly easy (I think) but unfortunately
I can't get a hold of the solution.
Consider the following HTML syntax:
<div id="wrapper">
<div class="box">
<a href="#" class="close">close</a>
</div>
<div class="box">
<a href="#" class="close">close</a>
</div>
<div class="box">
<a href="#" class="close">close</a>
</div>
<div class="box">
<a href="#" class="close">close</a>
</div>
<div class="box">
<a href="#" class="close">close</a>
</div>
</div>
Basically all boxes are floating left and that makes room for 2 per line.
The first box has a margin-right of 25px so that the 2nd box is pushed to
the edge of its container.
When I click the ".close" link I want the element to "hide();" and if the
element I clicked is ":even" then the one that will come into place (the
odd one) is to become "even" so the margin is applied and vice versa.
Basically it's a dynamic ":nth-child(2n)"... Every 2nd element has to have
no margin, and then first one has to have a margin-right of 25px, even if
I remove one element from that group.
Hope that makes sense! Thank you very much

No comments:

Post a Comment