title: Toggle dialog not working in jQuery. How to show animation dialog in button click?
body: <p>I have a button which succesfully toggles many elements on the page, but they are all below the height of the starting page, leading to the user not clearly getting feedback that they've succesfully toggled. I want to use a jQuery dialog which toggles open when I succesfully toggle those other elements open.</p>
  
  <p><strong>So I did this (jQuery):</strong></p>
  
  <pre><code> window.onload = function () {
      $("#toggleAllSSSP").click(function () {
        $(".SSSP").toggle('fast');
        $( "#toggleSuccess" ).dialog({
          autoOpen: false,
          show: {
            effect: "blind",
            duration: 1000
          },
          hide: {
            effect: "explode",
            duration: 1000
          }
        });
        $( "#toggleSuccess" ).dialog( "open" );
      }); 
  };
  </code></pre>
  
  <p><a href="http://jqueryui.com/dialog/#animated" rel="nofollow noreferrer">With inspiration from this page.</a></p>
  
  <p><strong>And here's the HTML</strong></p>
  
  <pre><code>&lt;button id="toggleAllSSSP"&gt;Show 4 levels of principles Principles (Default=3)&lt;/button&gt;
  &lt;div id="toggleSuccess" title="Toggle success"&gt;
      &lt;p&gt;You're now displaying 4 levels of Principles!&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried adding css to <code>#toggleSuccess</code> with the result of an element appearing as normal in the flow of the DOM. I know I could use window.alert but would prefer this solution, thanks.</p>