Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS jquery show/hide and some other questions Re: jquery show/hide and some other questions

#50277
cssgirl
Participant

Ok, sooo hopefully this will be the last question…

I tried this:

Code:
$(‘a.research-dev’).addClass(“active”).click(function() {
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:

Code:
$(‘a.research-dev’).click(function() {
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:

Code:
$(document).ready(function() {
// 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

Code:


CMC



Product Development
Research Development
Chemical Development
Fermentationt
Analytical
Regulatory
Quality
Strategy
Chain

Lorem ipsum dolor. Set frigilla a.
Set frigilla a. Lorem ipsum dolor.
Lorem ipsum dolor. Lorem ipsum dolor. Set frigilla a.
Lorem ipsum dolor. Set frigilla a. Lorem ipsum dolor.
Lorem ipsum dolor. Set frigilla a. Lorem ipsum dolor. Lorem ipsum dolor.
Set frigilla a. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
Lorem ipsum dolor. Lorem ipsum dolor. Set frigilla a.
Lorem ipsum dolor. Set frigilla a. Lorem ipsum dolor.
Lorem ipsum dolor. Set frigilla a. Lorem ipsum dolor.

What am I doing wrong here?

Demo is here:

http://dev.cssgirl.com/r/rondaxe/cmc.html