In this article we will explain how to use fadeToggle() Method in jQuery or What is fadeToggle() Method or why use fadeToggle() Method in jQuery with example.


jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut() methods.

If the elements are fadedIn, it will make them fadedOut and if they are fadedOut it will make them fadedIn.

In simple words we can say, jQuery fadeToggle method if html element hide then it will visible the html element and if html element visible then it will hide the element.



Let’s see simple jQuery fadeToggle() method with Example:

<!DOCTYPE html>
    <title>Example of jQuery fadeToggle method</title>
    <script type="text/javascript" src=""></script>
        $(document).ready(function () {
            $("button").click(function () {
    <p>See the fadeToggle() method </p>
    <button>Click to fade Toggle boxes</button><br><br>
    <div id="div1" style="width:300px;height:80px;background-color:chocolate;">

 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like