<div id="price">
<a href="http://example.com/<?php echo $_GET['Path'];?>&sort=3a">Price Up</a>
<a href="http://example.com/<?php echo $_GET['Path'];?>&sort=3d">Price Down</a>
</div>
<div id="name">
<a href="http://example.com/<?php echo $_GET['Path'];?>&sort=2a">Name Up </a>
<a href="http://example.com/<?php echo $_GET['Path'];?>&sort=2d">Name Down </a>
</div>
When the user clicks Price Up, the Price Down should show and Price Up should be hidden and vice versa. Similarly for Name Up and Name Down.
Why this can’t work?
$("#price a,#name a").eq(1).hide();
First off all, this doesn’t work:
because
'#price a, #name a'matches four elements theneq(1)selects the second of the four (equses zero based indexes) so only Price Down gets hidden. If you want to hide both Down links then you want the:eqselector:To toggle them you just need just a simple
clickhandler on all the<a>elements:The
siblingscall is an easy way to get all elements at the same level asthiswithout includethisin the list. You’d need to alter that slightly if your<div>s contained something other than the<a>elements that you’re interested in.Demo: http://jsfiddle.net/ambiguous/xwB2b/
Update For Comments: If you need to keep the links as links but also include some sort of show/hide toggling then you’ll need another control (or your users will hate you for trying to make one control do two things). Something like this:
And this:
Demo: http://jsfiddle.net/ambiguous/CAAan/
You could style the
<button>any way you wanted.