Search Icon that expands into search bar

[Robbie_archive]

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' %}
</a>

{% 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="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}">


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

</button>
</div>
</div>
</div>