Как реализовать появление блока при нажатии?

Question

[Space]

Всем доброго времени суток. Как реализовать появление блока class="button-order" при нажатии на див с id="example"?
Только на js/jquery, без доп. внесений в стили блока, разве что опять же через js/jquery.

Не могу написать скрипт именно без дополнительных заранее правок в стили этих блоков.

Answer 1

[Егор Огурцов]

Эмм

$(document).ready(function() {

$('#example').click(function(){
   $('.button-order').show();
});

});

А если изначально нужно еще и спрятать .button-order, то так:

$(document).ready(function() {

$('.button-order').hide();

$('#example').click(function(){
   $('.button-order').show();
});

});

Comments

[Space]

спасибо, а не подскажешь как сделать плавное появление, а именно чтобы выезжало в низ.

[Егор Огурцов]

вместо .show(); используй .slideDown();

[Space]

@mrdubz: спасибо, это ведь jquery. И последнее: как сделать, чтобы при повторном нажатии или вне области (body) задвигалось обратно (sliderUp)

[Егор Огурцов]

Иван: если по конкретному действию, то slideUp(), а иначе slideToggle()

[Space]

@mrdubz: все спасибо

Answer 2

[margin-top]

$(document).ready(function() {

   $('#example').click(function(){
      $('.button-order').toggle(); // показать-скрыть-показать-скрыть
   });

});

Comments

[Space]

@margin-top спасибо, а не подскажешь как сделать плавное появление, а именно чтобы выезжало в низ. Или хотя бы как прописать стили

[margin-top]

Иван: slideUp(sec), slideDown(sec)
sec = время "выезда и заезда"