Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

jQuery for WP-Ecommerce WordPress

  • SOLVED

I have the follow <ul> <li> code

<ul class="wpsc_categories wpsc_top_level_categories">
<li class="cat-item wpsc_category_94"> a </li>
<li class="cat-item wpsc_category_95"> a </li>
<ul class="children">
<li class="cat-item wpsc_category_94"> a </li>
<li class="cat-item wpsc_category_94"> a </li>
</ul>
<ul>


There is many more than that, but that is the general structur, where class="children" is display: hide

I'm using this code right now:


(function($) {
$(document).ready(function() {
$(".wpsc_top_level_categories > li:has(ul)").prepend("<span class=\"CatExpander\">[+]</span>");
$(".CatExpander").css( 'cursor', 'pointer' );
$(".CatExpander").toggle(function() {
$(this).html( '[-]' );
}, function() {
$(this).html( '[+]' );
});
$(".CatExpander").click(function() {
$(this).toggleClass("CatExpanded").siblings("ul").slideToggle(500);
return false;
}).eq(0).addClass("CatExpanded").end().slice(1).siblings("ul").hide();
});
})
(jQuery);


Somehow it seams like I have done something wrong because the first <li> start open.

But I want to add a extra feature to it.

Whenever all the menu look like below, I want it to be open when the page load, so that users don't have to open it. Notice it just add the class

<ul class="wpsc_categories wpsc_top_level_categories">
<li class="cat-item wpsc_category_94"> a </li>
<li class="cat-item wpsc_category_95 wpsc-cat-ancestor "> a </li>
<ul class="children">
<li class="cat-item wpsc_category_96 wpsc-cat-ancestor "> a </li>
<li class="cat-item wpsc_category_97 wpsc-cat-ancestor "> a </li>
</ul>

<ul>


I hope people get what I mean

Answers (2)

2011-11-25

Christianto answers:

Hi,

If class "wpsc-cat-ancestor" is added automatically when page load to mark a menu to be show then you don't need cookie..

The first list open because you use slice(1)
.slice(1).siblings("ul").hide()

please try this code..
Hope I'm not misunderstanding your question..

(function($) {
$(document).ready(function() {
$(".wpsc_top_level_categories > li:has(ul)").prepend("<span class=\"CatExpander\">[+]</span>");
$(".CatExpander").css( 'cursor', 'pointer' );
$(".CatExpander").toggle(function() {
$(this).html( '[-]' );
}, function() {
$(this).html( '[+]' );
});
$(".CatExpander").click(function() {
$(this).toggleClass("CatExpanded").siblings("ul").slideToggle(500);
return false;
}).eq(0).addClass("CatExpanded").end().siblings("ul").hide()
.parent('.wpsc-cat-ancestor,.wpsc-current-cat').find('.CatExpander').click();
});
})
(jQuery);


Kristian Primdal comments:

You totally understood my problem, and it is working just as I wanted now. I know I did not say it before. But could you do the same for if class wpsc-cat-ancestor is automatic add. So that I will also open then.


Kristian Primdal comments:

Sorry meant: wpsc-current-cat

Both wpsc-current-cat and wpsc-cat-ancestor is added at different times, and I want the code you sent to me do then same if either of these is added.

You code did work if I was not clear about that.


Christianto comments:

I've added above so if the parent element has category wpsc-cat-ancestor it will open.

I'm not checking for any "children" class descendant for "wpsc-cat-ancestor" class present because the parent is enough..

For "wpsc-current-cat" class,
is "wpsc-current-cat" class will going to be add like this..?
<li class="cat-item wpsc_category_95 wpsc-cat-ancestor wpsc-current-cat"> a
<ul class="children">
<li class="cat-item wpsc_category_96 wpsc-cat-ancestor "> a </li>
<li class="cat-item wpsc_category_97 wpsc-cat-ancestor "> a </li>
</ul>
</li>


Kristian Primdal comments:

It will just be instead of the wpsc-cat-ancestor:

<ul class="wpsc_categories wpsc_top_level_categories">
<li class="cat-item wpsc_category_94"> a </li>
<li class="cat-item wpsc_category_95 wpsc-current-cat "> a </li>
<ul class="children">
<li class="cat-item wpsc_category_96 wpsc-current-cat "> a </li>
<li class="cat-item wpsc_category_97 wpsc-current-cat "> a </li>
</ul>
<ul>


I tried just to doublicate the .parent line you added but that seams to fuck it up. Think I have to learn this jQuery, or just know a guy like you who I can hire for it ;)


Christianto comments:

:-)

I've edited my answer above, you just need to add other selector on .parent() separate it with comma..
.parent('.wpsc-cat-ancestor, .wpsc-current-cat')

Please vote me..


Kristian Primdal comments:

Perfect, worked thanks. Now I just have to find out how I close this.

2011-11-25

Jerson Baguio answers:

You mean if there are children on your menu lists.. children will also shows?

Do you have a demo so that i can check?


Kristian Primdal comments:

you can see the temporary site here. http://reminder.dk

I wan't it so that when I have clicked a category it keep being open, and the posibility to open and close the rest. And when none have been selected they should all be closed.


Jerson Baguio comments:

can you send me login. i think i understand what you want.

So when ever you clicked a category it shows its children and even you refresh the category that is clicked should also be open?

I think cookie will be the solution for this


Kristian Primdal comments:

I would prefer to keep it free of cookie, because as you can see it adds wpsc-cat-ancestor when a category have been choosen. So javascript should be able to solve this ?


Jerson Baguio comments:

yeah it solves by javascript but you still need a cookie.

check this jquery cookie https://github.com/carhartl/jquery-cookie


Kristian Primdal comments:

Okay, are you able to show me in codes how you will do it, I can easy add it myself.


Jerson Baguio comments:

give me a minute i will write a code


Kristian Primdal comments:

Jenson, I have got an answer already, thanks for the try.