показать div, когда кнопка нажата с переходом css в asp.net

Question

У меня есть веб-приложение, созданное в asp.net. В котором я хотел бы показать div (который скрыт изначально), когда нажата кнопка с переходом css.

Дополнительный запрос:

ДИВ, что показано на нажатие кнопки, будет иметь некоторое содержание к нему добавляется динамически во время выполнения.

Как это можно сделать?

Answer 1

Plain Javascript:

document.getElementById('BUTTON_ID').addEventListener('click', function(){ 
    document.getElementById('DIV_ID').style.display = 'block'; 
}) 

В качестве альтернативы, с JQuery:

$(function(){ 
    $('#BUTTON_ID').click(function(){ $('#DIV_ID').show() }); 
}); 

BUTTON_ID заменить и DIV_ID с идентификаторами реального элемента.

UPDATE:

, если вы хотите, чтобы DIV быть показано с переходом, я бы рекомендовал использовать jQuery следующим образом:

$(function(){ 
    $('#BUTTON_ID').click(function(){ $('#DIV_ID').fadeIn() }); 
}); 

Обратите внимание на .fadeIn() метод, который может быть заменен .show(), .slideDown() и больше. jQuery - это весело.

UPDATE 2:

для того, чтобы придать динамическое содержимое в DIV, сделайте следующее:

$(function(){ 
    $('#BUTTON_ID').click(function(){ 
     $('#DIV_ID').html('<b>Hello, dynamic content!</b>'); 
     $('#DIV_ID').fadeIn(); 
    }); 
}); 

надежда, что помогает.

Answer 2

Вот вариант сценария из @geevee, который я обычно использую много, DIV будет скользить вверх или вниз с закрытым и открытым параметром. Обратите внимание, что 500 - это скорость выполнения в миллисезонах, вы можете изменить это на то, что когда-либо вам подходит.

$(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 

Надеется, что это помогает