Databases
StackOverflow2013
Postsdbo
POHow to show a div thats hidden by css on button click
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to show a div thats hidden by css on button click
    text
    copied!<p>I'm pretty new to Jquery and i want to have a hidden div <code>css: display:none</code> and once a button has been clicked the <code>$(..).slideDown</code> will execute and the div will show its conents. I try'd this.</p> <pre><code>&lt;style&gt; .hidden-div{ display:none } &lt;/style&gt; &lt;div class="hidden-div"&gt; You can't see me &lt;/div&gt; &lt;button onclick="show-div()"&gt; Show Above Div &lt;/button&gt; &lt;script&gt; function show-div(){ $('.hidden-div').slideDown('fast'); // more stuff... } &lt;/script&gt; </code></pre> <p>This dont really slide it down properly as it overlaps everything else ? Also i try'd just setting the <code>class="hidden-div"</code> to <code>class="display-div"</code> but then the slideDown animation cannot be executed. </p> <p>Now i could say <code>$('hidden-div').hide()</code> just after the div and remove the css altogether but it creates this problem where i see the div and then it gets hidden, its only 0.5sec thing at the start of the page load but its look bad. </p> <p>So anyone know a solution?</p> <hr> <p><strong>Found a solution to my own problem..</strong> <code></p> <pre><code>//rehide the div, not sure why, but it works. $('.hidden-div').hide(); //change class so it no longer display:none //but it will not show the div as .hide() was execute above. $('.hidden-div').attr('class','showing-div'); //Slide it down and everything works. $('.hidden-div').slideDown('fast'); //this can be done in 1 liner. (thank you, Mohsen for chaining explanation) $('.hidden-div').hide().attr('class','showing-div').slideDown('fast'); </code></pre> <p></code></p> <p>Hope this is helpful for someone else.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload