jQuery Accordion problem

JavaScript
1

Hi,

http://tts.webtise.net/categories/House-%26-Garden/

On that page I have my accordion menu to the left, as you can see it kind of works ok, but if I want to click on a submenu item, to go to that category, it behaves as if it’s closing the accordion. Which is not what I need.

Now I kind of understand why, just trying to think how best to tackle it. Clearly what I have added is not going to work because it’s not specific. I should also point out that the sub list is being dynamically generated and I can’t edit that code to give the anchor a class.

But what I was thinking was can I apply a class to all anchors that are within the ul ul ? And then target that anchor class to prevent it from not following the link?



$(document).ready(function(){
 $(".Left #SideCategoryList ul#parent-cats ul:not(:first)").hide();
 $(".Left #SideCategoryList ul#parent-cats ul:visible").hide();
 $(".Left #SideCategoryList ul#parent-cats li h3 a").click(function() {
 $(".Left #SideCategoryList ul#parent-cats li ul:visible").slideUp("slow");
 $(this).parent().next().slideDown("slow");
 return false;
 });
$(".Left #SideCategoryList ul#parent-cats li ul li a").click(function() {
 return true;
 });
});
2

Just change the selector for the anchors so it only targets the ones inside the H3, not the sub-items:

$("#parent-cats > li > h3 > a").click(function() {
  //...
}

You won’t need this then:

$(".Left #SideCategoryList ul#parent-cats li ul li a").click(function() {
 return true;
 });

Also you’re overburdening the selector engine with unnecessary selectors. Since the ID attribute is unique, you can trim it down (as I did above).

3

Thanks mate,

so basically this is CSS selector that I have missed and not jQuery, if you see what I mean.

4

Sort of… but the CSS selectors way of accessing elements is pretty much what “makes” jQuery - that and the chaining of methods.

5

Yeah that’s what I meant really.

By the way, I’m learning JavaScript from scratch again, and making notes and starting to understand the basics more. I take it the transition from that to jQuery is a fairly easy step to make?

6

Yes, and that’s the better way to do it. Going from jQuery to JavaScript is probably not such a good idea.

If you haven’t visited quirksmode yet, it’s what made the learning curve short and not too steep for me - I highly recomment it.

7

I take it you mean this:

http://www.quirksmode.org/js/contents.html

That was not easy to find, the guy could probably do with a redesign, cos he has some good content there that’s not obvious to find.

I’m also in the middle of these:

http://net.tutsplus.com/videos/screencasts/javascript-from-null-chapter-4/

8

Yeah, that’s what I meant. Also just going through the MDC is a good idea once you’re already familiar with the basics. Reading about the Global Objects for example is a good start.

9

yeah that’s useful too.

My main trouble is I can’t spend 3 or 4 hours a day learning this as I need to work on projects and so forth - but what I am trying to do is integrate what I know with what I do, and use scripts as a way of understanding.

10

Probably the best way. No better way to learn it than by using it.

11

yeah very true. I’ve always understood variables, and for-loops, and how the basics of a function work - but now I’m learning things like Objects and Methods.

12

I actually need to use those selectors because the code for the #parent-cats is being reused across the top nav bar.

Out of interest, if I want to keep the sub ul open when on a sub cat page how do I do approach that?

13

I actually need to use those selectors because the code for the #parent-cats is being reused across the top nav bar.

Not sure what you mean by that. Which selectors, and how are they being reused?

Out of interest, if I want to keep the sub ul open when on a sub cat page how do I do approach that?

You can give it a class of “active” on the server side and then define “active” as being displayed.

Or, you just need to indicate what page you’re on by giving the body a particular class/id. Suppose page you’re on is “products”. You give the body the id “page-products” and each UL sub-category an ID as well (#cat-something). Then you do this:

#page-products #cat-products,
#page-services #cat-services,
#page-stuff #cat-stuff,
#page-things #cat-things {
  display:block
}

That way, the only thing you need to do server-side is change the body’s ID on each page.

14

I have the #side-category list thing being used for the top navigation - no way around it, limitations of Interspire i’m afraid.

Hmm, I could try that body id thing for sure - not on this until Wed, but thanks for your help mate.

15

Hmm, so if I do this:

$(document).ready(function(){
	$(".Left #SideCategoryList ul#parent-cats ul:not(:first)").hide();
	$(".Left #SideCategoryList ul#parent-cats ul:visible").hide();
	$(".Left #SideCategoryList #parent-cats > li > h3 > a").click(function() {
		$(".Left #SideCategoryList ul#parent-cats li ul:visible").slideUp("slow");
		$(".Left #SideCategoryList ul#parent-cats").addClass('active');
		$(this).parent().next().slideDown("slow");
		return false;
		
	});
});

That gives the UL a class of active, but do I need to run some code to check if this UL is active, and if so to show it?

16

If this is about the CSS I posted earlier, it should have nothing to do with the jQuery. It’s just to indicate which sub-category should be “active” (whatever that means in your design) when the page loads. Normally it just means it’s highlighted somehow, or no longer a link.

Adding “active” to #parent-cats achieves nothing, as that’s the parent UL that holds all the others.

17

Ah right, so I can say if the body class matches the ul class, show this ul?

Will I still not need to write some more jQuery to .show(); rather than .hide();

18

I mean this sort of thing: http://hicksdesign.co.uk/journal/highlighting-current-page-with-css

Also see the A List Apart article mentioned there.

19

yeah I know how to do that, but I’m after how do I keep the unordered list open if I click on a link within it.

20

You put the selector I gave you in the wrong place. This works:


  .Left #SideCategoryList ul#parent-cats ul {display:none}



  $(document).ready(function(){
    $("#parent-cats > li > h3 > a").click(function() {
      $(".Left #SideCategoryList ul#parent-cats li ul:visible").slideUp("slow");
      $(this).parent().next().filter(':hidden').show("slow");
      return false;
    });
  });