jQuery

Not getting something

[SaminOz]

Hoping someone can explain to me why this doesn't work as intended:

This code toggles the display of a div that is a sub-nav bar. Comments // show where in the code, when one appears the other should disappear - only it doesn't/they don't - they both display.

Thanks,

$(document).ready(function() {
//add .toggle function to appropriate li element
$('#hozmenu li:nth-child(4)').toggle(function () {
//set 4th menu links colour to be green whilst div is shown
$('#hozmenu li:nth-child(4) a').css('color', '#95d890');
//remove other toggle_div
$('#toggle_nav_services').removeClass('toggle_show');
$('#toggle_nav_services').addClass('toggle_hide');
$('#toggle_nav_caseStudies').slideToggle('medium', function() {
$(this).removeClass('toggle_hide');
$(this).addClass('toggle_show');
});
}, function() {
$('#toggle_nav_caseStudies').slideToggle('medium', function() {
$(this).removeClass('toggle_show');
$(this).addClass('toggle_hide');
});
});
$('#hozmenu li:nth-child(2)').toggle(function () {
//set 2nd menu links colour to be green whilst div is shown
$('#hozmenu li:nth-child(2) a').css('color', '#95d890');
//remove other toggle_div
$('#toggle_nav_caseStudies').removeClass('toggle_show');
$('#toggle_nav_caseStudies').addClass('toggle_hide');
$('#toggle_nav_services').slideToggle('medium', function() {
$(this).removeClass('toggle_hide');
$(this).addClass('toggle_show');
});
}, function() {
$('#toggle_nav_services').slideToggle('medium', function() {
$(this).removeClass('toggle_show');
$(this).addClass('toggle_hide');
});
});
});

[whoisgregg]

Nothing *looks* wrong with it, that I can see.

Is any of the code working? Like, the .css() call on the #hozmenu? Also, have you checked in multiple browsers?

[SaminOz]

Hi Greg, I sorted with this code - inelegant and I'm sure that with a better understanding of toggle and slideToggle there would be a better solution. Still it works :) - now I just have one small niggle which is under certain scenarios I have to click twice to have the desired effect - again, I think it is the second-half of the in-built .toggle function that is waiting to be cleared. I was wondering if there was a kind of "clear all" call one can do? anyway, here is the modified code - thanks heaps for taking a look!

$(document).ready(function() {
$('#hozmenu li:nth-child(3), #hozmenu li:nth-child(2)').hover(function () {
$(this).css('cursor', 'pointer');
$(this).css('color', '#95d890');
}, function() {
$(this).css('cursor', 'auto');
$(this).css('color', '#ffffff');
});
var openCS = false;
var openNS = false;
//add .toggle function to appropriate li element
$('#hozmenu li:nth-child(3)').toggle(function () {
//make sure the 'other' div is closed
openCS = true;
//set 3rd menu links colour to be green whilst div is shown
$('#hozmenu li:nth-child(3)').css('color', '#95d890');
//if services is open, close it and change link back to white
if(openCS == true) {
$('#toggle_nav_services').slideUp('medium', function() {
$('#hozmenu li:nth-child(2)').css('color', '#ffffff');
$(this).removeClass('toggle_show');
$(this).addClass('toggle_hide');
openCS = false;
});
}
$('#toggle_nav_caseStudies').slideDown('medium', function() {
$(this).removeClass('toggle_hide');
$(this).addClass('toggle_show');
openNS = true;
});
}, function() {
$('#toggle_nav_caseStudies').slideUp('medium', function() {
$('#hozmenu li:nth-child(3)').css('color', '#ffffff');
$(this).removeClass('toggle_show');
$(this).addClass('toggle_hide');
openNS = false;
});
});

$('#hozmenu li:nth-child(2)').toggle(function () {
//make sure the 'other' div is closed
openNS = true;
//set 2nd menu links colour to be green whilst div is shown
$('#hozmenu li:nth-child(2)').css('color', '#95d890');
//if case studies is open close it and set text to white
if(openNS == true) {
$('#toggle_nav_caseStudies').slideUp('medium', function() {
$('#hozmenu li:nth-child(3)').css('color', '#ffffff');
$(this).removeClass('toggle_show');
$(this).addClass('toggle_hide');
openNS = false;
});
}
$('#toggle_nav_services').slideDown('medium', function() {
$(this).removeClass('toggle_hide');
$(this).addClass('toggle_show');
openCS = true;
});
}, function() {
$('#toggle_nav_services').slideUp('medium', function() {
$('#hozmenu li:nth-child(2)').css('color', '#ffffff');
$(this).removeClass('toggle_show');
$(this).addClass('toggle_hide');
openCS = false;
});
});
});