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:-
0 Comment(s)