Home › Forums › CSS › jquery show/hide and some other questions › Re: jquery show/hide and some other questions
Ok, sooo hopefully this will be the last question…
I tried this:
hideAll();
$(‘#research-dev’).show(400);
return false;
});
But it made all the circles green onload. So I tried switching it and adding the active class within the click(function() { like so:
hideAll();
$(‘#research-dev’).show(400);
addClass(“active”)
return false;
});
Make the circles load as blue again, but still not keeping green on click.
So, I tried using "switchClass" instead, with same results. Not staying green. So I’m stuck again.
Here’s my jquery:
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$(‘#product-dev’).hide();
$(‘#research-dev’).hide();
$(‘#chem-dev’).hide();
$(‘#fermentation’).hide();
$(‘#analytical’).hide();
$(‘#regulatory’).hide();
$(‘#quality’).hide();
$(‘#strategy’).hide();
$(‘#chain’).hide();
function hideAll() {
$(‘#research-dev’).hide(400);
$(‘#chem-dev’).hide(400);
$(‘#fermentation’).hide(400);
$(‘#analytical’).hide(400);
$(‘#regulatory’).hide(400);
$(‘#quality’).hide(400);
$(‘#strategy’).hide(400);
$(‘#chain’).hide(400);
$(‘#product-dev’).hide(400);
$(‘a’).removeClass(“selected”); // Also remove class on anchor
};
// toggles the slickbox on clicking the noted link
$(‘a.prod-dev’).click(function() {
hideAll();
$(‘#product-dev’).show(400);
addClass(“selected”);
return false;
});
$(‘a.research-dev’).click(function() {
hideAll();
$(‘#research-dev’).show(400);
switchClass(‘research-dev’, ‘research-on’, 400);
return false;
});
$(‘a.chem-dev’).click(function() {
hideAll();
$(‘#chem-dev’).show(400);
addClass(“selected”);
return false;
});
$(‘a.fermentation’).click(function() {
hideAll();
$(‘#fermentation’).show(400);
addClass(“selected”);
return false;
});
$(‘a.analytical’).click(function() {
hideAll();
$(‘#analytical’).show(400);
addClass(“selected”);
return false;
});
$(‘a.regulatory’).click(function() {
hideAll();
$(‘#regulatory’).show(400);
addClass(“selected”);
return false;
});
$(‘a.quality’).click(function() {
hideAll();
$(‘#quality’).show(400);
addClass(“selected”);
return false;
});
$(‘a.strategy’).click(function() {
hideAll();
$(‘#strategy’).show(400);
addClass(“selected”);
return false;
});
$(‘a.chain’).click(function() {
hideAll();
$(‘#chain’).show(400);
addClass(“selected”);
return false;
});
});
And my CSS/HTML
Product Development
Research Development
Chemical Development
Fermentationt
Analytical
Regulatory
Quality
Strategy
Chain
What am I doing wrong here?
Demo is here: