Question

I’m pretty new to Jquery and i want to have a hidden div css: display:none and once a button has been clicked the $(..).slideDown will execute and the div will show its conents. I try’d this.

<style> .hidden-div{ display:none } </style>

<div class="hidden-div"> You can't see me </div>

<button onclick="show-div()"> Show Above Div </button>


<script>

    function show-div(){

        $('.hidden-div').slideDown('fast');
        // more stuff...
    }
</script>

This dont really slide it down properly as it overlaps everything else ? Also i try’d just setting the class="hidden-div" to class="display-div" but then the slideDown animation cannot be executed.

Now i could say $('hidden-div').hide() 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.

So anyone know a solution?

---

Found a solution to my own problem..

//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');

Hope this is helpful for someone else.

Answer 1

it’s better to use standard javascript and point to that div with id

<style> .hidden-div{ display:none } </style>

<div class="hidden-div" id="hidden-div"> You can't see me </div>

<button onclick="getElementById('hidden-div').style.display = 'block'"> Show Above Div </button>