Javascript-форум - Разварачиваемый поиск

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Разварачиваемый поиск (https://javascript.ru/forum/dom-window/72714-razvarachivaemyjj-poisk.html)

Разварачиваемый поиск

Привет Всем:victory: Вопрос такой:
-Хочу сделать поиск на опенкарт, такой чтобы при нажатии на кнопку раздвигался бы инпут, но при этом на мобильной версии он бы закрывал остальные элементы в блоке.
Вот блок:

Нужно просто сделать чтобы лупа в блоке выше была.

Так? (см. вложение)

Nexus,
Это что, загадка на тему "Найди отличия"? Таки я не нашел:(
sadosado,
По картинке вам никто не сможет помочь - нужен код, желательно в макетном виде, с явно демонстрируемой проблемой

я нашла)):dance:

Цитата:

Сообщение от Dilettante_Pro

Это что, загадка на тему "Найди отличия"? Таки я не нашел

Кол-во иконок напротив title изменилось.

Вы не нашли отличия, вероятно, из-за моих невероятных навыков в MS Paint :)

Цитата:

Сообщение от Dilettante_Pro

Таки я не нашел

кнопка поиска добавлена

по теме, смотреть устройство
https://learn.javascript.ru/ кнопка поиска, правый верхний угол.

Что-то я в полном пролете... Пойду нервно курить в углу:-E

Цитата:

Сообщение от Manyasha (Сообщение 478723)

я нашла)):dance:

А фото в контакте "Рязань... или где то рядом=)" не твое случаем?

Цитата:

Сообщение от Nexus (Сообщение 478719)

Так? (см. вложение)

думал немного по другому,но так даже лучше, но с компьютра чтобы он был раскрыт всегда. Спасибо, что так хорошо вникли:thanks:

вот поиск;

<div id="search" class="input-group">
  <input type="text" name="search" value="{{ search }}" placeholder="{{ text_search }}" class="form-control input-lg" />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
  </span>
</div>

так хочу:
не нажал:

нажал:

sadosado, попробуйте так:

$(function() {
    $('#search .input-group-btn button').click(function() {
        $('#search [name="search"]').toggle();
    });
    $('#search [name="search"]').addClass('hidden-xs');
});

Цитата:

Сообщение от MallSerg (Сообщение 478735)

А фото в контакте "Рязань... или где то рядом=)" не твое случаем?

кто? где? кругом шпиёны:-?

Цитата:

Сообщение от sadosado (Сообщение 478738)

но с компьютра чтобы он был раскрыт всегда

проверяла на телефоне: инпут отображается только при клике на кнопку

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
 #search {
	 position: relative;
	 width: 300px;
	 margin: 0 10px auto auto;
	 height: 40px;
 }
 button.btn {
	 background: #7f7f7f;
	 border: 2px groove #7BA7AB;
	 height: 40px;
	 width: 40px;
	 position: absolute;
	 top: 2px;
	 right: 2px;
	 cursor: pointer;
 }
 input.form-control {
	 height: 40px;
	 width: 300px;
	 padding: 0 40px 0 0px;
	 background: transparent;
	 transition: 0.5s;
	 position: absolute;
	 top: 0;
	 right: 0;
 }
 input.form-control:focus {
	 width: 300px;
	 z-index: 1;
 }
 @media screen and (max-width: 768px){
	 input.form-control {
		 width: 0px;
		 z-index: 2;
	 }
 }
</style>
</head>
<body>
  <div id="search" class="input-group">
	 <input type="text" name="search" placeholder= "Поиск" class="form-control input-lg" />
	 <span class="input-group-btn">
	 <button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
	 </span>
  </div>
</body>

Почему-то с этой страницы на телефоне открытый инпут, а тут нет: https://jsfiddle.net/yxorL83q/42/

Manyasha,
строка 34 - фрейм здесь больше 768