ToggleClass - Behind the Scenes

What we saw before is basically the same application of the ToggleClass jQuery property.
After loading the page we send a request to change on click some attributes, to remove some classes and to change and/or add some CSS properties. The code below shows all the sequence of the jQuery call.

		
// Change attributes by Giorgio Riccardi

$('.btn_03').click(function(e){
	var $this = $(this);
	
	if($this.text() == "Magical jQuery >>"){
		
		// Elements to change on click
		$('.java-img').attr('src', 'images/logo/jscript_big.png');
		
		//this will just add another class...
		$('.no-style').toggleClass('jq-style'); 
		// ...to override the one before, it depends on the cascade order!!
		
		$('p.no-style').removeClass('no-style').addClass('no-style-display');
		
		$('.hidden').css({
			'display'	: 'block',
			'font-family': '"PT Sans",sans-serif',
			'color'	  : 'grey',
			'font-size'  : '1.5em',
			'font-style' : 'italic',
 			'text-indent': '80px',
			'font-weight': 'bold'
		});
		
		$('.signature').css('float', 'right');
				
		$this.text('Next >>');
	
		e.preventDefault();
		
	}

}); // end of Change attributes by Giorgio Riccardi
        
        Scroll Up
    

Credits

The code rendering is offered by Prism plugin.

The Drop Down Menu is offered by Michael Whyte.


JavaScript and jQuery Tutorial


jQuery is a cross-browser JavaScript library.

jQuery is designed to simplify the client-side scripting of HTML.


Java Icon