Hello,
I have a little jquery here (file:///Users/kam/Desktop/CURRENT%20KAMSSHOWCASE%20copy/web-services.html)
Basically I want it so when you click it brings down information which works fine and puts a border/filler around the link.
Right now I have this done by .click doing a slideToggle and sliding up everything else so it doesn’t show more than one. Then I have it togglethe css Class for the nav border and removing any classes from the other links. Is there a more efficent way to do this? Each nav has a seperate ID (nav-basic, nav-advanced etc.) and each drop down text has a seperate ID as well (basic-text, advanced-text etc).’ Below is the jquery Code.
$(document).ready(function() {
$('#basic-text,#advanced-text,#custom-text,#other-text,#packages-text').hide();
$('#nav-basic').click(function() {
$('#basic-text').slideToggle('fast', function() {
$('#advanced-text').slideUp(200);
$('#custom-text').slideUp(200);
$('#other-text').slideUp(200);
$('#packages-text').slideUp(200);
$('#nav-basic').toggleClass('clicked-style');
$('#nav-advanced').removeClass('clicked-style');
$('#nav-custom').removeClass('clicked-style');
$('#nav-other').removeClass('clicked-style');
$('#nav-packages').removeClass('clicked-style');
});
});
$('#nav-advanced').click(function() {
$('#advanced-text').slideToggle('fast', function() {
$('#basic-text').slideUp(200);
$('#custom-text').slideUp(200);
$('#other-text').slideUp(200);
$('#packages-text').slideUp(200);
$('#nav-advanced').toggleClass('clicked-style');
$('#nav-basic').removeClass('clicked-style');
$('#nav-custom').removeClass('clicked-style');
$('#nav-other').removeClass('clicked-style');
$('#nav-packages').removeClass('clicked-style');
});
});
$('#nav-custom').click(function() {
$('#custom-text').slideToggle('fast', function() {
$('#basic-text').slideUp(200);
$('#advanced-text').slideUp(200);
$('#other-text').slideUp(200);
$('#packages-text').slideUp(200);
$('#nav-custom').toggleClass('clicked-style');
$('#nav-basic').removeClass('clicked-style');
$('#nav-advanced').removeClass('clicked-style');
$('#nav-other').removeClass('clicked-style');
$('#nav-packages').removeClass('clicked-style');
});
});
$('#nav-packages').click(function() {
$('#packages-text').slideToggle('fast', function() {
$('#basic-text').slideUp(200);
$('#custom-text').slideUp(200);
$('#other-text').slideUp(200);
$('#advanced-text').slideUp(200);
$('#nav-packages').toggleClass('clicked-style');
$('#nav-basic').removeClass('clicked-style');
$('#nav-advanced').removeClass('clicked-style');
$('#nav-custom').removeClass('clicked-style');
$('#nav-other').removeClass('clicked-style');
});
});
$('#nav-other').click(function() {
$('#other-text').slideToggle('fast', function() {
$('#nav-other').toggleClass('clicked-style');
$('#basic-text').slideUp(500);
$('#custom-text').slideUp(500);
$('#advanced-text').slideUp(500);
$('#packages-text').slideUp(500);
$('#nav-basic').removeClass('clicked-style');
$('#nav-advanced').removeClass('clicked-style');
$('#nav-custom').removeClass('clicked-style');
$('#nav-packages').removeClass('clicked-style');
});
});