title: Dojo toggler not working with display: none
body: <p>This is a sample of what works:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;script type="text/javascript" src="dojo/dojo.js"&gt;
  &lt;/script&gt;
  &lt;script language="javascript" type="text/javascript"&gt;
  require(["dojo/dom","dojo/fx/Toggler","dojo/topic","dojo/domReady!"],
  
      function(dom,Toggler,topic){
  var toggler = new Toggler ({
      node: "test"
  });
  alert("something");     
  toggler.hide();
  
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="test"&gt;This is just a test.&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And when I add <code>display: none</code> to my div (and using <code>toggler.show()</code>), it stops working. This is a sample of what does not work: </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;script type="text/javascript" src="dojo/dojo.js"&gt;
  &lt;/script&gt;
  &lt;script language="javascript" type="text/javascript"&gt;
  require(["dojo/dom","dojo/fx/Toggler","dojo/topic","dojo/domReady!"],
  
      function(dom,Toggler,topic){
  var toggler = new Toggler ({
      node: "test"
  });
  alert("something");     
  toggler.show();
  
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="test" style="display:none"&gt;This is just a test.&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>Question:</strong> </p>
  
  <ul>
  <li>Why is this happening? </li>
  <li>Is there something fundamentally wrong with the way I am using dojo or its toggler module?</li>
  <li>What is the alternative to toggler (if any), which I can use with <code>display: none</code>?</li>
  </ul>
  
  <hr>
  
  <p><strong>Note:</strong> </p>
  
  <p>I have checked various possibly duplicate links but they all provide workarounds as mentioned below:-</p>
  
  <ul>
  <li>Using <code>dojo.style("test","display","")</code> works, but in complex projects it messes with the alignment etc. </li>
  <li>Removing <code>display:none</code> or replacing it with <code>visibility: hidden</code> is not an option for me. It works, but I would like to avoid workarounds if an actual solution exists.</li>
  </ul>