Geek asks and answers

Hide element with jQuery when button is clicked

I have buttons associated with a specific selection, and I want to display the form associated with the selection and remove the buttons when one of them is pressed. I hide all forms at the beginning so that the user first clicks the button. This is the code:

$(document).load(function () {
    $("#radial, #rect").hide();
});
$("#rectS").click(function () {
    $("#rect").show(slow);
    $(".confirm").remove();
});
$("#radialS").click(function () {
    $("#radial").show(slow);
    $(".confirm").remove();
});

But it does nothing, and no one can explain to me why. Incidentally, hiding at the beginning does not work either. jQuery really disappoints ...

Codepen: http://codepen.io/megakoresh/pen/HJEzx

+3
source share
2 answers

You need to change slowto 'slow'. And wrap your code in to bind the event after loading dom elements $(document).ready(function(){ });

$(document).ready(function () {
    $("#radial, #rect").hide();
    $("#rectS").click(function () {
        $("#rect").show('slow');
        //--------------^----^--
        $(".confirm").remove();
    });
    $("#radialS").click(function () {
        $("#radial").show('slow');
        //----------------^----^--
        $(".confirm").remove();
    });
});

Codepen Demo

Documentation: http://api.jquery.com/show/

+2
source

Try

Put all your code in the DOM Ready

$(document).ready(function () {
    $("#radial, #rect").hide();
    $("#rectS").click(function () {
        $("#rect").show('slow');
              //        ^    ^ wrap show in quotes
        $(".confirm").remove();
    });
    $("#radialS").click(function () {
        $("#radial").show('slow');
        $(".confirm").remove();
    });
});
+1
source

More articles:


All Articles