Недавно лепил нечто такое.
Вариант без JS.
Прячешь чекбокс, сразу после него элемент, который должен разворачиваться.
Далее делаешь для чекбокса лейбл отдельный и по нажатию на него включаешь \ выключаешь спрятанный чекбокс.
Таким образом получаешь триггер который фиксируется в одном из двух положений.
Далее селектором отлавливаешь объект стоящий после чекбокса в зависимости от состояния чекбокса вкл \ выкл
.check + .field{
стили класса field при не отмеченном чекбоксе стоящем перед ним
}
.check:checked + .field{
стили класса field при отмеченном чекбоксе стоящем перед ним
}
вариант не универсальный (новый зависимый элемент = новый чекбокс + новый стиль)
<div class="search">
<label class="glyphicon glyphicon-search" for="searchButton"></label>
<input type="checkbox" class="check" id="searchButton"/>
<input class="field" name="searchInput" placeholder="Найти..."/>
</div>
