Как сделать простой выпадающий блок с формой поиска?

Question

[png2378]

Мне нужно сделать простой выпадающий блок, чтобы при клике на иконку он «выезжал» и в нём была форма поиска (от google). На словах не совсем понятно, что я хочу, поэтому вот ссылка на пример (иконка поиска в правом верхнем углу). В идеале хочу точно также, ну или хотя бы приближенно.

Долго гуглил по этому вопросу, но ничего похожего не нашел, поэтому был вынужден обрататься сюда. Заранее спасибо за ответы.

Answer 1

[Михаил Горячкин]

Вот вам пример:
HTML

<button id="open">Открыть</button>
<div id="form">
  <form action="#" method="post">
    <input type="text" value="" placeholder="найти" />
  </form>
</div>

CSS:

#form {
  padding: 20px;
  background-color: #000;
  display: none;
}

JS:

$(document).ready(function () {
  var searchBlock = $('#form');
  $(document).on('click', '#open', function () {
    searchBlock.slideToggle();
    return false;
  });
});

А вообще заглянули бы в код страницы, там все написано.

Answer 2

[Defman21]

<div id="button">Open</div>
<div id="expand">text here</div>
<style>
div#expand {
display: none;
}
</style>
<script>
$("#button").click(function() { $("#expand").slideToggle() } );
</script>