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)
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.
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.