Tuesday, November 20, 2012

display hide content on page using JQuery

On page load , 1st div which is "div1"  is enabled , rest are hidden . On further link clicks , respective divs , as defined by class of list element  , are enabled , rest divs are disabled

jQuery(function () {

$('#nav a').click(function () {

var myClassLinked = $(this).parent().attr('class');

$('#container > :not(#' + myClassLinked + ')').hide();

$('#' + myClassLinked ).fadeIn(); }); });

$(document).ready(function () {

$('#container > :not(#' + 'div1' + ')').hide();

$('#' + 'div1').fadeIn();

});

Full example code