Hide element with jQuery on button press

Question

I have buttons associated with a certain choice and I wanna display a form related to the choice and remove the buttons when one of them is clicked. I hide all the forms in the beginning so the user must click the button first. 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 doesn't do anything and no one can tell me why. The hiding at the start doesn't work either, by the way. jQuery is really frustrating...

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

Answer 1

You need to change slow to 'slow' . And wrap your code within $(document).ready(function(){ }); to bind event after dom elements are loaded

$(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/

Answer 2

Try

Put all your code in 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();
    });
});