CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Skitterm
Skitterm

Reputation: 4595

JQuery css function not persisting its change

I have a "button-bar" div that I only want to show once the user has clicked on a "settings" button. I have set the button-bar div to display:none in my css. Unfortunately, when the settings button is clicked, the div shows up for a split second, then goes away. Does anyone know why this might be happening? My current code:

$(document).ready(function() {
    $('#settings').on('click', function() {
        $('#button-bar').css('display', 'inline-block');
    });
});

Upvotes: 0

Views: 64

Answers (3)

RichardB
RichardB

Reputation: 2767

You need to add a "return false;" at the end of your function, otherwise it follows the html link, which is empty.

(edit: The href="#" will work to fix your error, but it will also make the page jump to the top when clicked. The return false; will stop this happening if that is a problem. )

Upvotes: 0

Mark
Mark

Reputation: 4873

The problem is your href="" are empty, it is reloading the page. Put hashtags in them. href="#"

Upvotes: 1

Mark
Mark

Reputation: 4873

$(document).ready(function() {
    $('#settings').on('click', function() {
        $('#button-bar')show();
    });
});

or maybe

$(document).ready(function() {
        $('#settings').click(function() {
            $('#button-bar')show();
        });
    });

Upvotes: 0

Related Questions