Jquery ToggleClass and toggle

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');
 	 });
   });

Not sure I can access file:///Users/kam/Desktop/CURRENT%20KAMSSHOWCASE%20copy/web-services.html
:frowning:

Oh gosh… my apologies.

It must be one of those days.

http://www.kamsshowcase.com/CURRENT%20KAMSSHOWCASE%20copy/web-services.html

Hi there,
It looks pretty good already, but I noticed a couple of things:

[LIST=1]
[]When you click on one of the links to fade the content in, it pushes the footer down the page.
[
]The links jump when you hover over them.
[]The panels aren’t bookmarkable.
[
]You load all of the content straight away, then hide it. If I was doing this, I might be tempted to use AJAX to just load what is needed on the fly.
[/LIST]Here is a good tutorial you might want to look at,which addresses points 3) and 4).

HTH

Hello,
Thank you for your information. I got the footer, links and everything worked out and the AJAX was a charm. Exactly what I was looking for. Thank you so much.

Great job! Looks much better now!