I have a slideToggle functioning just fine on my page:
But I’m trying to get it to set a cookie that remembers what is closed and what is open. So, step one, I’m trying determine (on click) what the state of slideToggle is. Here is my code so far…
function initMenu() {
$('#groups ul').hide();
$('#groups li a').click(
function() {
$(this).next().slideToggle('normal');
var id = $(this).attr('id');
if ($(this).next().is(':hidden')) {
var state = "closed";
} else {
var state = "open";
}
alert($(this).next().attr('id') + ' is ' + state);
return false;
}
);
}
…but everytime I click, I get the message “…is open.” Can you please take a look at my if statement and let me know how to
determine the slide_toggle state? Once I get that working, I should be able to figure out myself how to save the state for every ID to the cookie. Thanks!
The reason your getting this problem is that you are checking the state before the toggle has had a chance to finish and define if the item is open or closed.
If you place the code that does the alerting in a callback it works fine, see example below:
$('#groups li a').click(
function() {
$(this).next().slideToggle('normal',function(){
if ($(this).is(':hidden')) {
var state = "closed";
} else {
var state = "open";
}
alert($(this).attr('id') + ' is ' + state);
return false;
});
});
}
Thanks for the resource. Despite my poor programming skills, I got it working! It toggles it the item, and the cookies are read and saved just fine.
It works in Firefox too, but Firebug detects an error when I click on an item now. Before I added the cookie support, I didn’t get any errors. I’d like to get rid of this if I can. Can someone take a look?
syntax error
void()
javascript:void() (line 1)
Here’s my finished code and working demo, for reference:
function groupsMenu() {
// create a default array with all elements closed
var groupsArray = new Array();
groupsArray[0] = "closed";
groupsArray[1] = "closed";
groupsArray[2] = "closed";
groupsArray[3] = "closed";
$('#groups ul').hide();
$('#groups li a').click(
function() {
$(this).next().slideToggle('normal',function(){
var id = $(this).attr('id'); // the ID of a sliding element, ex: "slide_3"
var number = id.charAt(6); // take just the number from the ID, ex: "3"
if ($(this).is(':hidden')) {
var state = "closed";
} else if ($(this).is(':visible')) {
var state = "open";
}
groupsArray[number] = state; // update the array to set the number of the element clicked to its new state, ex: groupsArray[3] = "open";
$.cookie('groupsList', groupsArray); // save the updated array as a cookie
return false;
});
}
);
// if cookie exists, put data into an array
if ($.cookie('groupsList')) {
var temp = $.cookie('groupsList');
var groupsList = new Array();
groupsList = temp.split(',');
// loop through array to find any sliding elements that should be opened
for(var i=0; i < groupsList.length; i++) {
// if an element is found in the cookie that should be opened, open it and update the array as well
if (groupsList[i] == "open") {
$('#groups #slide_' + i).show();
groupsArray[i] = "open";
}
}
// cookie doesn't exist, so create one with all elements closed.
} else {
$.cookie('groupsList', groupsArray);
}
}
// Load groupsMenu when the page is ready for it.
$(document).ready(function() {groupsMenu();});
(btw, how do you specify code as javascript in bbcode?)
It’s the href=“javascript:void()” code that you’re using. Links should reference a suitable destination, which in the case of Victor Admin would be “#slide_0”
Go to advanced editing and select from the Syntax dropdown box, or just manually type it in yourself.