jQuery UI API - Fold Effect

Category

Effects

Usage

Description:The Fold Effect hides or shows an element by folding it.

fold

Parameters Type Description Default value
size Number or String The size of the folded element. 15
horizFirst Boolean Whether to fold horizontally first when folding. Remember, the order is reversed when showing versus hiding. false

Examples

Use the Fold Effect to toggle a div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>折叠特效（Fold Effect）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<p>点击任意地方进行切换。</p>
<div id="toggle"></div>
 
<script>
$( document ).click(function() {
  $( "#toggle" ).toggle( "fold" );
});
</script>
 
</body>
</html>

Other extensions