CINXE.COM

<!doctype html> <html class="no-js" lang="en-US"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Toggle | jQuery UI</title> <meta name="author" content="OpenJS Foundation - openjsf.org"> <meta name="description" content="jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice."> <meta name="viewport" content="width=device-width"> <link rel="shortcut icon" href="https://jqueryui.com/wp-content/themes/jqueryui.com/i/favicon.ico"> <link rel="stylesheet" href="https://jqueryui.com/wp-content/themes/jquery/lib/typesense-minibar/typesense-minibar.css?v=c5fa9b9a"> <link rel="stylesheet" href="https://jqueryui.com/wp-content/themes/jquery/css/base.css?v=9fa813cf"> <link rel="stylesheet" href="https://jqueryui.com/wp-content/themes/jqueryui.com/style.css?v=7a640af9"> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://jqueryui.com/wp-content/themes/jquery/js/main.js?v=10baaffd"></script> <script defer type="module" src="https://jqueryui.com/wp-content/themes/jquery/lib/typesense-minibar/typesense-minibar.js?v=830f1ee1"></script> <meta name='robots' content='max-image-preview:large' /> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style> <link rel="https://api.w.org/" href="https://jqueryui.com/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://jqueryui.com/wp-json/wp/v2/pages/76" /><meta name="generator" content="WordPress 6.7.1" /> <link rel="canonical" href="https://jqueryui.com/toggle/" /> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://jqueryui.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fjqueryui.com%2Ftoggle%2F" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://jqueryui.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fjqueryui.com%2Ftoggle%2F&format=xml" /> </head> <body class="jquery-ui page-template-default page page-id-76 page-slug-toggle single-author singular"> <header> <section id="global-nav"> <nav> <div class="constrain"> <ul class="projects"> <li class="project jquery"><a href="https://jquery.com/" title="jQuery">jQuery</a></li> <li class="project jquery-ui"><a href="https://jqueryui.com/" title="jQuery UI">jQuery UI</a></li> <li class="project jquery-mobile"><a href="https://jquerymobile.com/" title="jQuery Mobile">jQuery Mobile</a></li> <li class="project sizzlejs"><a href="https://sizzlejs.com/" title="Sizzle">Sizzle</a></li> <li class="project qunitjs"><a href="https://qunitjs.com/" title="QUnit">QUnit</a></li> </ul> <ul class="links"> <li><a href="https://plugins.jquery.com/">Plugins</a></li> <li class="dropdown"><a href="https://contribute.jquery.org/">Contribute</a> <ul> <li><a href="https://cla.openjsf.org/">CLA</a></li> <li><a href="https://contribute.jquery.org/style-guide/">Style Guides</a></li> <li><a href="https://contribute.jquery.org/triage/">Bug Triage</a></li> <li><a href="https://contribute.jquery.org/code/">Code</a></li> <li><a href="https://contribute.jquery.org/documentation/">Documentation</a></li> <li><a href="https://contribute.jquery.org/web-sites/">Web Sites</a></li> </ul> </li> <li class="dropdown"><a href="https://events.jquery.org/">Events</a> <ul class="wide"> </ul> </li> <li class="dropdown"><a href="https://jquery.com/support/">Support</a> <ul> <li><a href="https://learn.jquery.com/">Learning Center</a></li> <li><a href="https://jquery.com/support/">Chat</a></li> <li><a href="https://stackoverflow.com/tags/jquery/info">Stack Overflow</a></li> <li><a href="https://contribute.jquery.org/bug-reports/">Report a bug</a></li> </ul> </li> <li class="dropdown"><a href="https://openjsf.org/">OpenJS Foundation</a> <ul> <li><a href="https://openjsf.org/join">Join</a></li> <li><a href="https://openjsf.org/members">Members</a></li> <li><a href="https://jquery.com/team">jQuery Team</a></li> <li><a href="https://openjsf.org/governance">Governance</a></li> <li><a href="https://code-of-conduct.openjsf.org/">Conduct</a></li> <li><a href="https://openjsf.org/projects">Projects</a></li> </ul> </li> </ul> </div> </nav> </section> </header> <div id="container"> <div id="logo-events" class="constrain clearfix"> <h2 class="logo"><a href="/" title="jQuery UI">jQuery UI</a></h2> <aside id="broadcast"></aside> </div> <nav id="main" class="constrain clearfix"> <div class="menu-top-container"> <button hidden id="menu-trigger" class="button menu-trigger" aria-expanded="false" aria-haspopup="menu">Navigation</button> <ul id="menu-top" class="menu" role="menu" aria-labelledby="menu-trigger"> <li class="menu-item"><a href="https://jqueryui.com/demos/">Demos</a></li> <li class="menu-item"><a href="https://jqueryui.com/download/">Download</a></li> <li class="menu-item"><a href="https://api.jqueryui.com/">API Documentation</a></li> <li class="menu-item"><a href="https://jqueryui.com/themeroller/">Themes</a></li> <li class="menu-item"><a href="https://jqueryui.com/development/">Development</a></li> <li class="menu-item"><a href="https://jqueryui.com/support/">Support</a></li> <li class="menu-item"><a href="https://blog.jqueryui.com/">Blog</a></li> <li class="menu-item"><a href="https://jqueryui.com/about/">About</a></li> </ul> </div> <typesense-minibar data-origin="https://typesense.jquery.com" data-collection="jqueryui_com" data-key="Zh8mMgohXECel9wjPwqT7lekLSG3OCgz" data-foot="true" data-group="true" > <form role="search" class="searchform" action="https://jqueryui.com/" method="get"> <input type="search" name="s" aria-label="Search jQuery UI" value="" placeholder="Search" autocomplete="off"> <button type="submit" class="visuallyhidden"></button> </form> </typesense-minibar> </nav> <div id="content-wrapper" class="clearfix row"> <div class="content-right twelve columns"> <div id="content"> <h1 class="entry-title">Toggle</h1> <hr> <p class="desc">Display or hide elements using custom effects.</p> <div class="demo-list" data-full-nav="true"><h2>Examples</h2><ul><li><a href="/resources/demos/effect/default.html">Effect demo</a></li><li><a href="/resources/demos/effect/addClass.html">addClass demo</a></li><li><a href="/resources/demos/effect/animate.html">Animate demo</a></li><li><a href="/resources/demos/effect/easing.html">Easing demo</a></li><li><a href="/resources/demos/effect/hide.html">Hide Demo</a></li><li><a href="/resources/demos/effect/removeClass.html">removeClass Demo</a></li><li><a href="/resources/demos/effect/show.html">Show Demo</a></li><li><a href="/resources/demos/effect/switchClass.html">switchClass Demo</a></li><li class="active"><a href="/resources/demos/effect/toggle.html">Toggle Demo</a></li><li><a href="/resources/demos/effect/toggleClass.html">toggleClass Demo</a></li></ul></div><iframe src="/resources/demos/effect/toggle.html" class="demo-frame"></iframe><div class="demo-description"> <p>Click the button above to preview the effect.</p> </div><div class="view-source"><a tabindex="0"><i class="icon-eye-open"></i> view source</a><div><div class="syntaxhighlighter xml"> <table> <tbody> <tr> <td class="gutter"> <div class="line n1">1</div> <div class="line n2">2</div> <div class="line n3">3</div> <div class="line n4">4</div> <div class="line n5">5</div> <div class="line n6">6</div> <div class="line n7">7</div> <div class="line n8">8</div> <div class="line n9">9</div> <div class="line n10">10</div> <div class="line n11">11</div> <div class="line n12">12</div> <div class="line n13">13</div> <div class="line n14">14</div> <div class="line n15">15</div> <div class="line n16">16</div> <div class="line n17">17</div> <div class="line n18">18</div> <div class="line n19">19</div> <div class="line n20">20</div> <div class="line n21">21</div> <div class="line n22">22</div> <div class="line n23">23</div> <div class="line n24">24</div> <div class="line n25">25</div> <div class="line n26">26</div> <div class="line n27">27</div> <div class="line n28">28</div> <div class="line n29">29</div> <div class="line n30">30</div> <div class="line n31">31</div> <div class="line n32">32</div> <div class="line n33">33</div> <div class="line n34">34</div> <div class="line n35">35</div> <div class="line n36">36</div> <div class="line n37">37</div> <div class="line n38">38</div> <div class="line n39">39</div> <div class="line n40">40</div> <div class="line n41">41</div> <div class="line n42">42</div> <div class="line n43">43</div> <div class="line n44">44</div> <div class="line n45">45</div> <div class="line n46">46</div> <div class="line n47">47</div> <div class="line n48">48</div> <div class="line n49">49</div> <div class="line n50">50</div> <div class="line n51">51</div> <div class="line n52">52</div> <div class="line n53">53</div> <div class="line n54">54</div> <div class="line n55">55</div> <div class="line n56">56</div> <div class="line n57">57</div> <div class="line n58">58</div> <div class="line n59">59</div> <div class="line n60">60</div> <div class="line n61">61</div> <div class="line n62">62</div> <div class="line n63">63</div> <div class="line n64">64</div> <div class="line n65">65</div> <div class="line n66">66</div> <div class="line n67">67</div> <div class="line n68">68</div> <div class="line n69">69</div> <div class="line n70">70</div> <div class="line n71">71</div> <div class="line n72">72</div> <div class="line n73">73</div> <div class="line n74">74</div> <div class="line n75">75</div> <div class="line n76">76</div> <div class="line n77">77</div> <div class="line n78">78</div> <div class="line n79">79</div> <div class="line n80">80</div> <div class="line n81">81</div> <div class="line n82">82</div> <div class="line n83">83</div> <div class="line n84">84</div> <div class="line n85">85</div> <div class="line n86">86</div> <div class="line n87">87</div> <div class="line n88">88</div> <div class="line n89">89</div> <div class="line n90">90</div> </td> <td class="code"> <pre><div class="container"><div class="line"><code><span class="hljs-meta"><!DOCTYPE <span class="hljs-meta-keyword">html</span>></span><span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span><span class="hljs-tag"><<span class="hljs-name">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>jQuery UI Effects - Toggle Demo<span class="hljs-tag"></<span class="hljs-name">title</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/resources/demos/style.css"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-selector-class">.toggler</span> {</code></div></div><div class="container"><div class="line"><code> <span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>;</code></div></div><div class="container"><div class="line"><code> <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> <span class="hljs-selector-id">#button</span> {</code></div></div><div class="container"><div class="line"><code> <span class="hljs-attribute">padding</span>: .<span class="hljs-number">5em</span> <span class="hljs-number">1em</span>;</code></div></div><div class="container"><div class="line"><code> <span class="hljs-attribute">text-decoration</span>: none;</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> <span class="hljs-selector-id">#effect</span> {</code></div></div><div class="container"><div class="line"><code> <span class="hljs-attribute">position</span>: relative;</code></div></div><div class="container"><div class="line"><code> <span class="hljs-attribute">width</span>: <span class="hljs-number">240px</span>;</code></div></div><div class="container"><div class="line"><code> <span class="hljs-attribute">height</span>: <span class="hljs-number">170px</span>;</code></div></div><div class="container"><div class="line"><code> <span class="hljs-attribute">padding</span>: <span class="hljs-number">0.4em</span>;</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> <span class="hljs-selector-id">#effect</span> <span class="hljs-selector-tag">h3</span> {</code></div></div><div class="container"><div class="line"><code> <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</code></div></div><div class="container"><div class="line"><code> <span class="hljs-attribute">padding</span>: <span class="hljs-number">0.4em</span>;</code></div></div><div class="container"><div class="line"><code> <span class="hljs-attribute">text-align</span>: center;</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"></<span class="hljs-name">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://code.jquery.com/jquery-3.7.1.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://code.jquery.com/ui/1.14.1/jquery-ui.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> $( <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code> <span class="hljs-comment">// run the currently selected effect</span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">runEffect</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code> <span class="hljs-comment">// get effect type from</span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-keyword">var</span> selectedEffect = $( <span class="hljs-string">"#effectTypes"</span> ).val();</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="hljs-comment">// Most effect types need no options passed by default</span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-keyword">var</span> options = {};</code></div></div><div class="container"><div class="line"><code> <span class="hljs-comment">// some effects have required parameters</span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-keyword">if</span> ( selectedEffect === <span class="hljs-string">"scale"</span> ) {</code></div></div><div class="container"><div class="line"><code> options = { <span class="hljs-attr">percent</span>: <span class="hljs-number">50</span> };</code></div></div><div class="container"><div class="line"><code> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> ( selectedEffect === <span class="hljs-string">"size"</span> ) {</code></div></div><div class="container"><div class="line"><code> options = { <span class="hljs-attr">to</span>: { <span class="hljs-attr">width</span>: <span class="hljs-number">200</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">60</span> } };</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="hljs-comment">// Run the effect</span></code></div></div><div class="container"><div class="line"><code> $( <span class="hljs-string">"#effect"</span> ).toggle( selectedEffect, options, <span class="hljs-number">500</span> );</code></div></div><div class="container"><div class="line"><code> };</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="hljs-comment">// Set effect from select menu value</span></code></div></div><div class="container"><div class="line"><code> $( <span class="hljs-string">"#button"</span> ).on( <span class="hljs-string">"click"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code> runEffect();</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code> } );</code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag"></<span class="hljs-name">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag"><<span class="hljs-name">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"toggler"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"effect"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ui-widget-content ui-corner-all"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ui-widget-header ui-corner-all"</span>></span>Toggle<span class="hljs-tag"></<span class="hljs-name">h3</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">p</span>></span></code></div></div><div class="container"><div class="line"><code> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.</code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"effects"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"effectTypes"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"blind"</span>></span>Blind<span class="hljs-tag"></<span class="hljs-name">option</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"bounce"</span>></span>Bounce<span class="hljs-tag"></<span class="hljs-name">option</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"clip"</span>></span>Clip<span class="hljs-tag"></<span class="hljs-name">option</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"drop"</span>></span>Drop<span class="hljs-tag"></<span class="hljs-name">option</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"explode"</span>></span>Explode<span class="hljs-tag"></<span class="hljs-name">option</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"fade"</span>></span>Fade<span class="hljs-tag"></<span class="hljs-name">option</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"fold"</span>></span>Fold<span class="hljs-tag"></<span class="hljs-name">option</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"highlight"</span>></span>Highlight<span class="hljs-tag"></<span class="hljs-name">option</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"puff"</span>></span>Puff<span class="hljs-tag"></<span class="hljs-name">option</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"pulsate"</span>></span>Pulsate<span class="hljs-tag"></<span class="hljs-name">option</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"scale"</span>></span>Scale<span class="hljs-tag"></<span class="hljs-name">option</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"shake"</span>></span>Shake<span class="hljs-tag"></<span class="hljs-name">option</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"size"</span>></span>Size<span class="hljs-tag"></<span class="hljs-name">option</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"slide"</span>></span>Slide<span class="hljs-tag"></<span class="hljs-name">option</span>></span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag"></<span class="hljs-name">select</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ui-state-default ui-corner-all"</span>></span>Run Effect<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag"></<span class="hljs-name">body</span>></span><span class="hljs-tag"></<span class="hljs-name">html</span>></span></code></div></div></pre> </td> </tr> </tbody> </table> </div> </div></div> <p>Want to learn more about the <code>.toggle()</code> method? Check out the <a href="https://api.jqueryui.com/toggle/">API documentation</a>.</p> </div> <div id="sidebar" class="widget-area" role="complementary"> <aside class="widget"> <h3 class="widget-title">Interactions</h3> <ul> <li><a href="https://jqueryui.com/draggable/">Draggable</a></li><li><a href="https://jqueryui.com/droppable/">Droppable</a></li><li><a href="https://jqueryui.com/resizable/">Resizable</a></li><li><a href="https://jqueryui.com/selectable/">Selectable</a></li><li><a href="https://jqueryui.com/sortable/">Sortable</a></li> </ul> </aside> <aside class="widget"> <h3 class="widget-title">Widgets</h3> <ul> <li><a href="https://jqueryui.com/accordion/">Accordion</a></li><li><a href="https://jqueryui.com/autocomplete/">Autocomplete</a></li><li><a href="https://jqueryui.com/button/">Button</a></li><li><a href="https://jqueryui.com/checkboxradio/">Checkboxradio</a></li><li><a href="https://jqueryui.com/controlgroup/">Controlgroup</a></li><li><a href="https://jqueryui.com/datepicker/">Datepicker</a></li><li><a href="https://jqueryui.com/dialog/">Dialog</a></li><li><a href="https://jqueryui.com/menu/">Menu</a></li><li><a href="https://jqueryui.com/progressbar/">Progressbar</a></li><li><a href="https://jqueryui.com/selectmenu/">Selectmenu</a></li><li><a href="https://jqueryui.com/slider/">Slider</a></li><li><a href="https://jqueryui.com/spinner/">Spinner</a></li><li><a href="https://jqueryui.com/tabs/">Tabs</a></li><li><a href="https://jqueryui.com/tooltip/">Tooltip</a></li> </ul> </aside> <aside class="widget"> <h3 class="widget-title">Effects</h3> <ul> <li><a href="https://jqueryui.com/addClass/">Add Class</a></li><li><a href="https://jqueryui.com/animate/">Color Animation</a></li><li><a href="https://jqueryui.com/easing/">Easing</a></li><li><a href="https://jqueryui.com/effect/">Effect</a></li><li><a href="https://jqueryui.com/hide/">Hide</a></li><li><a href="https://jqueryui.com/removeClass/">Remove Class</a></li><li><a href="https://jqueryui.com/show/">Show</a></li><li><a href="https://jqueryui.com/switchClass/">Switch Class</a></li><li><a href="https://jqueryui.com/toggle/">Toggle</a></li><li><a href="https://jqueryui.com/toggleClass/">Toggle Class</a></li> </ul> </aside> <aside class="widget"> <h3 class="widget-title">Utilities</h3> <ul> <li><a href="https://jqueryui.com/position/">Position</a></li><li><a href="https://jqueryui.com/widget/">Widget Factory</a></li> </ul> </aside> </div> </div> </div> </div> <footer class="clearfix simple"> <div class="constrain"> <div class="row"> <div class="six columns centered"> <h3><span>Books</span></h3> <ul class="books"> <li> <a href="https://www.manning.com/books/jquery-ui-in-action"> <span><img src="https://jqueryui.com/wp-content/themes/jquery/content/books/jquery-ui-in-action.jpg" alt="jQuery UI in Action by TJ VanToll" width="92" height="114"></span> <strong>jQuery UI in Action</strong><br> <cite>TJ VanToll</cite> </a> </li> <li> <a href="https://www.packtpub.com/web-development/jquery-ui-themes-beginners-guide"> <img src="https://jqueryui.com/wp-content/themes/jquery/content/books/jquery-ui-themes.jpg" alt="jQuery UI Themes by Adam Boduch" width="92" height="114"> <span class="book-title">jQuery UI Themes</span> <cite>Adam Boduch</cite> </a> </li> <li> <a href="https://www.packtpub.com/web-development/jquery-ui-cookbook"> <img src="https://jqueryui.com/wp-content/themes/jquery/content/books/jquery-ui-cookbook.jpg" alt="jQuery UI Cookbook by Adam Boduch" width="92" height="114"> <span class="book-title">jQuery UI Cookbook</span> <cite>Adam Boduch</cite> </a> </li> </ul> </div> </div> <div id="legal" class="legal"> <ul class="footer-site-links"> <li><a class="icon-pencil" href="https://learn.jquery.com/">Learning Center</a></li> <li><a class="icon-comments" href="https://jquery.com/support/">Chat</a></li> <li><a class="icon-twitter" href="https://twitter.com/jqueryui">Twitter</a></li> <li><a class="icon-github" href="https://github.com/jquery">GitHub</a></li> </ul> <p class="copyright"> Copyright 2024 <a href="https://openjsf.org/">OpenJS Foundation</a> and jQuery contributors. All rights reserved. See <a href="https://jquery.com/license/">jQuery License</a> for more information. The <a href="https://openjsf.org/">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org/">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org/">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org/">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org/">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation <a href="https://terms-of-use.openjsf.org/">Terms of Use</a>, <a href="https://privacy-policy.openjsf.org/">Privacy</a>, and <a href="https://www.linuxfoundation.org/cookies">Cookie</a> Policies also apply. </p> <p><a href="https://www.digitalocean.com" class="do-link">Web hosting by Digital Ocean</a> | <a href="https://www.fastly.com/">CDN by Fastly</a> | <a href="https://wordpress.org/" class="wp-link">Powered by WordPress</a></p> </div> </div> </footer> </body> </html>