Thanks. That's it. My code isn't too OO or jQueryish. I know. I'm more
of a procedural guy. I have to spend more time with jQuery before I
grokking will come.
The event handler does open and close the <LI> properly. The golbal
anaimate function is defined below the click handler. I am going to
read through the other manipulation methods to see if I use them.
Mike
On Sun, Mar 22, 2009 at 1:12 PM, T.J. Crowder <t...@crowdersoftware.com> wrote:
>
> 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>
