How to create silde using id or class property in jquery?

In this article we will discuss to create slide silde using id or class property using slideToggle() property. It is visually better than toggling, I will show you with example.

Example:

<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>slide property injquery</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
       $(document).ready(function () {
            $('#animate').click(function () {
               $('.box').slideToggle('slow');
               $('#div2').slideToggle('slow');
           });
       });
    </script>
    <style type="text/css">
        div {
           display: inline-block;
            float: left;
            color: #fff;
              font-size: 13px;
           padding-left: 5px;
       }

       .button {
            background-color: purple;
            color: white;
            margin: 20px;
            padding: 10px;
        }
        .first {
            width: 150px;
            height: 200px;
            background: red;
        }
        .second {
            width: 160px;
            height: 200px;
            background: #009688;
        }
    </style>
</head>
<body>
    <div class="content">
        <h2 style="color: #325696">slide using  id& class property  in jquery</h2>
        <div>
              <input type="button" id="animate" class="button" value="animate" />
        </div>
       <div class="box first">
            <p><b>jquery slide using id </b>
                $('.box').slideToggle('slow'); 
            </p>
        </div>
         <div id="div2" class="second">
            <p>jquery slide using class property
               $('#div2').slideToggle('slow');
            </p>
        </div>
    </div>
</body>
</html>

Output: