Multifunctional buttons within jQuery

Question

$("#button1").click(function () {
             var visible = $(".sidebarcontent1").is(":visible");
             $(".sidebarcontent1").show(); visible ? "hide" : "show";
             $(".sidebarcontent").show();
             $(".sidebarcontent2").hide();
             $(".sidebarcontent3").hide();
             $(".sidebarcontent4").hide();
         });

I want to have it so I click the button when it's shown, it will go to hide. vice versa but this doesn't work.

Answer 1

Use .toggle()

$("#button1").click(function () {
    $(".sidebarcontent1").toggle();
    $(".sidebarcontent").show();
    $(".sidebarcontent2").hide();
    $(".sidebarcontent3").hide();
    $(".sidebarcontent4").hide();
});

Answer 2

As i understand it:

$("#button1").click(function () {
    var visible = $(".sidebarcontent1").is(":visible");
    $(".sidebarcontent1, .sidebarcontent").toggle(visible);
    $(".sidebarcontent2, .sidebarcontent3, .sidebarcontent4").toggle(!visible);
});