Search Icon that expands into search bar

15 1 4

Hey, anybody who could help me, currently I am trying to create a search icon, that when clicked on expands into a search bar, in the simple theme. I currently have the following elements, in my header.liquid,I only need to tie them together with the javascript code, but I have no idea where to start: 


 <div class="top-bar__search">
<a class="medium-up--hide">
{% include 'icon-search' %}

{% comment %}Search Button Click{% endcomment %}
<div class="search-bar small--hide">
{% comment %}<input type="hidden" name="type" value="product">{% endcomment %}

{% comment %}Search Bar{% endcomment %}
<input type="search" name="q" class="search-bar__input" value="{{ search.terms | escape }}" placeholder="{{ '' | t }}" aria-label="{{ '' | t }}">

{% comment %}Search Icon{% endcomment %}
<button type="submit" class="search-bar__submit">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ '' | t }}</span>


Replies 0 (0)