jQuery Callback with toggle

In this example, we will place the slideToggle() (Combination of slideUp() and slideDown())and alert() statements next to each other. If you try this code the alert will be displayed immediately once you click the trigger button without waiting for slide toggle effect to complete.

<!DOCTYPE html>
<html>
<head>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<style>
    p{
        background:rgb(0, 234, 255);
        font-size: 30px;
        padding:20px;
    }
</style>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            alert("The slide toggle effect has completed.");
        });
        
    });   
});
</script>
</head>

<body>
    <h1>Click to Hide Text </h1>
    <p> APPWRK IT Solutions makes technology simple for you</p>
    <button type="button" style="height: 40px; width:150px">Click me to Hide/show</button>
</body>
</html>

Output