why the label "p" don't slide down when i click the button "hide" or "show"

Question

When i click the button hide or show,the label "p" don't slide down.But when the function is fadeToggle it can run. How can i let the label "p" slide down when i click hide or show?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(
            function () {
                $("button").click
                (   function ()
                    {
                       // $("p").fadeToggle("slow");
                       // $("p").fadeTo("slow");
                        $("p").slideDown("slow");

                    }
                );
            }
        );

    </script>

</head>
<body>
    <p id="p1">hello show and hide</p>
    <button type="button">hide</button>
    <button type="button">show</button>
</body>



</html>

Answer 1

Your #p1 should be hidden before it can slide down. Please check my code below

 $(document).ready( function() { $("button").click(function() { // $("p").fadeToggle("slow"); // $("p").fadeTo("slow"); $("p").slideDown("slow"); }); } );

 #p1 { display: none }

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="http.//code.jquery.com/jquery-latest.js"></script> </head> <body> <p id="p1">hello show and hide</p> <button type="button">hide</button> <button type="button">show</button> </body> </html>

Answer 2

You can make your p tag hidden onload and then when any button ie: hide/show is clicked check if it has a particular class depending on this slideDown or slideUp your p tag.

Demo Code :

 $("button").click(function() { //check if the button has show class.. $(this).hasClass("show")? $("p").slideDown("slow"): $("p").slideUp("slow"); });

 p#p1 { display: none }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p id="p1">hello show and hide</p> <!--added hide/show class--> <button type="button" class='hide'>hide</button> <button type="button" class='show'>show</button>

why the label "p" don't slide down when i click the button "hide" or "show"

Question

2 answers

solution1
1 2021-04-21 05:03:51

solution2
0 ACCPTED 2021-04-21 05:02:55

why the label "p" don't slide down when i click the button "hide" or "show"

Question

2 answers

solution1 1 2021-04-21 05:03:51

solution2 0 ACCPTED 2021-04-21 05:02:55

solution1
1 2021-04-21 05:03:51

solution2
0 ACCPTED 2021-04-21 05:02:55