[jQuery] Pointers to disable default function if JS is enabled
folks, I am trying to puzzle something out. I am using Jquery 1.3.2.
I have an animated list where the clicked item that opens and an
already open item closes. Accordion like. I add or remove the
classname "opened" to determine which element is open. sample HTML and
JS below. That all works. Now from a UI standpoint, I'd like to
accomplish the following:
If the user doesn't have Javascript enabled, I want them to be able to
click on the list title which takes them to the proper page. If they
do have Javascripe enabled, then when the item is closed, a click
should open the item. If the item is already open, then a click should
take them to the page.
preventDefault() doesn't work well because all <LI> items share a
common class and there doensn's seem to be a way to disable it for one
class, like "opened". I tried remove(), but that strips the entire
element including the text. I was hoping it would just strip the <A>
tag.
I am thinking I have to first extract the text surrounded by the <A>
strip the element from all "accordionElements", insert the text back
in, and then for the "opened" item, insert the <A>.
Or is there a easier/better way to do this.
TIA, mike
So if I have this:
<ul id="accordion">
<li class="accordionElement opened"><a href="#none"
class="headerLink">Menu 1</a></li>
<li class="accordionElement"><a href="#none" class="headerLink">Menu
2</a></li>
<li class="accordionElement"><a href="#none" class="headerLink">Menu
3</a></li>
....
</ul>
<script type="text/javascript">
$(document).ready(function(){
startH = 24;
endH = 175;
speed = 700;
$('.opened').animate({"height": endH + "px"}, speed);
$("#accordion .accordionElement").click(function() {
if (this.className.indexOf('opened') == -1) {
animate(startH)
$('.opened').removeClass('opened');
$(this).addClass('opened');
animate(endH)
}
});
function animate(Y) {
$('.opened').stop().animate({"height": Y + "px"}, 500);
}
});
</script>