Hi Mike,
I'm not following what's going on inside your click handler, apologies
if I'm misreading it but it looks like it would fail as is (do you
really have a global animate() function, for instance?). Also, you're
not declaring the 'event' parameter, which makes it awkward (though
not impossible) to call its preventDefault() function.
This handler will prevent the default only on unopened LIs and not
opened ones:
$('#accordion .accordionElement').click(function(event){
if (!$(this).hasClass('opened')) {
event.preventDefault();
}
});
(You'll need to add in your animate logic, etc.)
HTH, and apologies if I'm misreading.
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Mar 22, 2:28 pm, mike <mfra...@gmail.com> wrote:
> 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>
