Grow your CSS skills. Land your dream job.

prevent page jump with tabs and toggle

  • # May 31, 2012 at 10:11 pm

    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?

    # May 31, 2012 at 10:12 pm

    What does your code look like?

    # May 31, 2012 at 11:43 pm

    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");

    });
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".