Live Code Editor Version 2.0

hide show jquery 4 RUN

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example of jQuery Show Hide Effects</title>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <style>
            div{
                padding: 15px;
                background: #F0E68C;
            }
        </style>
        <script>
            $(document).ready(function () {
                // Ẩn các thẻ p khi click vào button hide
                $(".hide-btn").click(function () {
                    $("div").hide("slow", function(){
                        alert("Hàm hide đã chạy xong");
                    });
                });

// Hiện các thẻ p khi click vào button show
                $(".show-btn").click(function () {
                    $("div").show("slow", function(){
                        alert("Hàm show đã chạy xong");
                    });
                });
            });
        </script>
    </head>
    <body>
        <button type="button" class="hide-btn">Hide Paragraphs</button> 
        <button type="button" class="show-btn">Show Paragraphs</button>
        <div>This is a paragraph.</div>
    </body>
</html>