Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Toggle method in jQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 252
    Comment on it

    Today we are going to learn toggle method in jQuery with example.

    Toggle method() is used to hide and show the particular selected element.

    Syntax of toggle method() is:-

    $(selector).toggle(speed,easing,callback)

    We can pass three parameters-

    1. Speed- It is used to indicate the speed of the hide/show selector. Whether it will toggle fast, slow or we can give time in milliseconds.

    2. Easing- It indicates the flow of the speed. Whether the speed will be constant whole time or will swing according to time.

    3. Callback- It is used to indicate, if any other function will be called after the toggle is completed.


    Below is the example of toggle. In this example we will also see, how to change text of a button while toggle.

    HTML-

    <body>
     	<div class="filter_container"> <!-- main container -->
                <div class="list_btn"> <!-- button to be clicked -->
                   <button>Show List</button>
                </div>
                <div class="info_list"> <!-- list to be opened on click of button -->
                   <ul class="clearfix">
                     <li>Country</li>
                     <li>Program</li>
                     <li>Department</li>
                     <li>University</li>
                   </ul>
                </div>
        </div>
    </body>

     

    CSS-

    .clearfix:after {
        content: '';
        display: block;
        clear: both;
    }
    .list_btn{
    	float: left;
    }
    .list_btn button { /*style of button*/
       background-color: #00af50;
        border: medium none;
        border-radius: 23px;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        width: 130px;
        height: 40px;
    }
    .info_list { /*initially list is hidden*/
        display: none;
    }
    .info_list ul {  /*style of list*/
        max-width: 900px;
        margin: 0 auto;
        list-style: none;
    }
    .info_list ul li {
        width: 40%;
        float: left;
        margin: 10px 10px 0 0;
        background: #fff;
        border: 1px solid #85A3D8;
        border-radius: 8px;
        color: #4471C4;
        padding: 8px 0;
        font-size: 20px;
        text-align: center;
    }

     

    jQuery

    var abc = 1;
    $(".list_btn button").click(function() {
      if (abc==1) {
        $(".list_btn button").text("Hide List");
        abc=0;
      }else{
        $(".list_btn button").text("Show List");
        abc=1;
      }
      $(".info_list").toggle();
     
    });

     

    Here is the link of above code:-

    https://jsfiddle.net/68hL5tby/4/

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: