Головна‎ > ‎jQuery‎ > ‎

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

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>