Сховати-показати

2 кнопки

<script>

$(document).ready(function(){

    $("#hide").click(function(){

        $("p").hide();

    });

    $("#show").click(function(){

        $("p").show();

    });

});

</script>

<button id="hide">Hide</button>

<button id="show">Show</button>

<p>Перший абзац</p>

<p>Другий абзац</p>

1 кнопка

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("p").toggle();

    });

});

</script>

<button>Toggle</button>

<p>Перший абзац</p>

<p>Другий абзац</p>

1 кнопка + плавна анімація

<script> 

$(document).ready(function(){

    $("#flip").click(function(){

        $("#panel").slideToggle("slow");

    });

});

</script>

<style> 

   #panel, #flip {

       padding: 5px;

       text-align: center;

       background-color: #e5eecc;

      border: solid 1px #c3c3c3;

   }

   #panel {

       padding: 50px;

       display: none;

   }

</style>

<div id="flip">Натисніть, аби панель виїхала чи сховалася</div>

<div id="panel">Привіт кабачок!</div>