[jQuery] Re: Help with show hide function

Sun, 23 Aug 2009 06:32:12 -0700

You can streamline your methods a lot by thinking about  classes first before thinking about ID's. SOme simple addition of classes to this code will allow consolidating everything into one fairly simple function

your code:

 $('#home').click(function() {
      $('#who>a').removeClass('selected');// 4 lines of code because you don't know which of these ID's might be "selected
      $('#what>a').removeClass('selected');
      $('#where>a').removeClass('selected');
      $('#work>a').removeClass('selected');

      $('#home>a').addClass('selected');

      $('#whoTab').hide('slow');// 4 lines of code because you don't know which of these ID's might be visible
      $('#whatTab').hide('slow');
      $('#whereTab').hide('slow');
      $('#workTab').hide('slow');

      $('#homeTab').show('slow');
      return false;
  });

Now if you were to add a class to all of the ID's you want to click on and the divs you want to open you could consolidate all of your click functions into one. The only additional information you woulld need to add is a relationship between the menu item being clicked and the "Tabs". There are lots of ways to do this, depending on the hierarchy in markup

Since I have no idea what markup looks like, will use "index". Assume adding "menuClass" and "tabClass" to respective elements

$('.menuClass').click(function() {
    var menuIndex= $('.menuClass').index(this)// tells us which of the menuClass is being clicked ( zero based so first will be index =0)
     $('.selected').removeClass('selected');
    $('.tabClass').hide('slow');// again, since not looking at ID's will close any open tabs and ignore any that are closed already
    $("a", this).addClass('selected')
    $('.tabClass').eq(menuIndex).show()// opens the tabClass with same index number as the menuClass being clicked
});




Jacques Choquette - WhistlerGraphicDesign.com wrote: 
This is what I ending up going with ....

I seriously doubt this is the most efficient / proper way to do this
this but it's working anyways

<script type="text/_javascript_">
$(document).ready(function() {

 // hides the all tabs as soon as the DOM is ready
 // (a little sooner than page load)
  $('#homeTab').hide();
  $('#whoTab').hide();
  $('#whatTab').hide();
  $('#whereTab').hide();
  $('#workTab').hide();

  // display the homeTab by default
  $('#homeTab').show('slow');

  // set home menu state to active
  $('#home>a').addClass('selected');

 // toggles the tab on clicking the noted link

  $('#home').click(function() {


	  $('#who>a').removeClass('selected');
	  $('#what>a').removeClass('selected');
	  $('#where>a').removeClass('selected');
	  $('#work>a').removeClass('selected');

	  $('#home>a').addClass('selected');

	  $('#whoTab').hide('slow');
	  $('#whatTab').hide('slow');
	  $('#whereTab').hide('slow');
	  $('#workTab').hide('slow');

	  $('#homeTab').show('slow');
	  return false;
  });

  $('#who').click(function() {

	  $('#home>a').removeClass('selected');
	  $('#what>a').removeClass('selected');
	  $('#where>a').removeClass('selected');
	  $('#work>a').removeClass('selected');

	  $('#who>a').addClass('selected');

	  $('#homeTab').hide('slow');
	  $('#whatTab').hide('slow');
	  $('#whereTab').hide('slow');
	  $('#workTab').hide('slow');

	  $('#whoTab').show('slow');
	  return false;
  });

   $('#what').click(function() {

	  $('#home>a').removeClass('selected');
	  $('#who>a').removeClass('selected');
	  $('#where>a').removeClass('selected');
	  $('#work>a').removeClass('selected');

	  $('#what>a').addClass('selected');

      $('#homeTab').hide('slow');
	  $('#whoTab').hide('slow');
	  $('#whereTab').hide('slow');
	  $('#workTab').hide('slow');

	  $('#whatTab').show('slow');
	  return false;
  	});

  $('#where').click(function() {

	  $('#home>a').removeClass('selected');
	  $('#who>a').removeClass('selected');
	  $('#what>a').removeClass('selected');
	  $('#work>a').removeClass('selected');

	  $('#where>a').addClass('selected');

	  $('#homeTab').hide('slow');
	  $('#whoTab').hide('slow');
	  $('#whatTab').hide('slow');
	  $('#workTab').hide('slow');

	  $('#whereTab').show('slow');
	  return false;
  	});

	$('#work').click(function() {

	  $('#home>a').removeClass('selected');
	  $('#who>a').removeClass('selected');
	  $('#what>a').removeClass('selected');
	  $('#where>a').removeClass('selected');

	  $('#work>a').addClass('selected');

	  $('#homeTab').hide('slow');
	  $('#whoTab').hide('slow');
	  $('#whatTab').hide('slow');
	  $('#whereTab').hide('slow');

	  $('#workTab').show('slow');
	  return false;
  });

});
</script>

Reply via email to