Forums

cybershot

I am using jquery to run some tabs and toggles and when I click the toggle to fold down the div containing hidden information, my page jumps to the top. I want to stop this. I tried searching the web and it seems that function(e){ e.preventDefault(); } is suppose to work but I am not getting any results. Any ideas?

TheDoc

What does your code look like?

cybershot

I got it working. Turns out that the e.preventDefault(); needs to be inside the .click. So this does not work


$(document).ready(function(e) {
	 e.preventDefault();
	var $toggle = $('.toggle-button a'),
    $togglePane = $('.toggle-pane');
	//$toggle.addClass('toggle-inactive');
	$toggle.on('click', function() {
    $(this).toggleClass('toggle-active').toggleClass('toggle-inactive').parent().next($togglePane).toggle();
	});
	$("ul.tabs").tabs("div.panes > div");
	
});

but this does work


$(document).ready(function() {
	var $toggle = $('.toggle-button a'),
    $togglePane = $('.toggle-pane');
	//$toggle.addClass('toggle-inactive');
	$toggle.on('click', function(e) {
		e.preventDefault();
    $(this).toggleClass('toggle-active').toggleClass('toggle-inactive').parent().next($togglePane).toggle();
	});
	$("ul.tabs").tabs("div.panes > div");
	
});

treehouse : what would you like to learn today?

Forums

[Solved] prevent page jump with tabs and toggle