show the div when button clicked with css transition in asp.net - css

Question

I have a web application created in asp.net. In which, I would like to show a div (which is hidden initially) when a button is clicked with a css transition.
Additional Request:
The div that is shown on button click, will have some content added to it dynamically at run time.
How this can be done?

Answer 1

Here is a variation of the script from #geevee which I tend to use a lot, the DIV will slide up or down with a close and open option. Note the 500 is the speed of execution in milliseonds, you can change that to what ever suits you.
$(function(){
$('#BUTTON_ID').click(function(){
if ($('#DIV_ID').css('display') =='none')
{
$('#BUTTON_ID').html('Show DIV');
$('#DIV_ID').slideDown(500);
}
else
{
$('#BUTTON_ID').html('Hide DIV');
$('#DIV_ID').slideUp(500);
}
});//end .click
});//end onload
Hope this helps

Answer 2

Plain Javascript:
document.getElementById('BUTTON_ID').addEventListener('click', function(){
document.getElementById('DIV_ID').style.display = 'block';
})
Alternatively, with jQuery:
$(function(){
$('#BUTTON_ID').click(function(){ $('#DIV_ID').show() });
});
replace BUTTON_ID and DIV_ID with real element IDs.
UPDATE:
if you want the div to be shown with transition, i'd recommend to use jQuery as following:
$(function(){
$('#BUTTON_ID').click(function(){ $('#DIV_ID').fadeIn() });
});
notice the .fadeIn() method, which can be replaced with .show(), .slideDown() and more. jQuery is fun.
UPDATE 2:
in order to inject dynamic content into the div, do as following:
$(function(){
$('#BUTTON_ID').click(function(){
$('#DIV_ID').html('<b>Hello, dynamic content!</b>');
$('#DIV_ID').fadeIn();
});
});
hope that helps.