jquery slideToggle() method


  Translation results:

slide

UK[slaɪd] 美[slaɪd]

vi.Slide; fall; skid; [baseball] slide

vt .fading (to); gradually lowering; to turn quietly; (to make) move quickly and quietly

n. slide; to lower

toggle

英[ˈtɒgl]   美[ˈtɑ:gl]  

n.Bar button; lasso button; conversion key; switch key

v.Switch

jquery slideToggle() methodsyntax

Function: slideToggle() method switches the visible state of the element by using the sliding effect (height change). Hides the selected elements if they are visible, and shows them if the selected elements are hidden.

Syntax: $(selector).slideToggle(speed,callback)

Parameters:

ParameterDescription
speed Optional. Specifies how quickly an element goes from hidden to visible (or vice versa). Default is "normal". Possible values: milliseconds (e.g. 1500) "slow" "normal" "fast" When setting the speed, the element will gradually change its height as it switches (this will create a sliding effect).
callback Optional. The function to be executed after the toggle function is executed. This parameter cannot be set unless the speed parameter is set.

Note: If the element has been hidden, the effect will not change unless a callback function is specified.

jquery slideToggle() methodexample

<html>
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
</body>
</html>
Run instance »

Click the "Run instance" button to view the online instance

Home

Videos

Q&A