JQuery

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

How to create silde using id or class property in jquery?, someone asked me to explain?
By:

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:

create silde using id or class property in jquery

Related Article

Post your comments / questions



Recent Article