JSFiddle - React, Tailwind, and code Playground

by xaliber

HTML

<section class="search" role="seach">

    <div class="open-search opener" style="display: block; ">
      <a href="#" title="Show search box" role="button">
         <span data-icon="ô" aria-hidden="true"></span>
         <span class="screen-reader">Show search box</span>
      </a>
    </div>

    <div class="close-search" style="display: none; ">
      <form id="search-form" action="/search-results/">

        <div>
          <label for="q" id="search-label" class="screen-reader">Search</label>
          <input aria-labelledby="search-label" id="q" type="search" name="q" class="search-field" placeholder="Search terms..." value="">
          <input type="submit" value="Search" class="button search-button">
        </div>

        <div class="search-parts">
          <strong>Search in:</strong>
          <a data-url="/search-results/" class="active">All</a>
          <a data-url="/search-results/forums/">Forums</a>
          <a data-url="/search-results/snippets/">Snippets</a>
          <a data-url="/search-results/video/">Videos</a>
          <a data-url="/search-results/almanac/">Almanac</a>

          <a href="#" id="x-search" class="x-search">✕</a>
        </div>

      </form>
    </div>

  </section>

CSS

.search {
position: absolute;
top: 75px;
right: 10%;
white-space: nowrap;
overflow: hidden;
height: 75px;
width: 75px;
background: #5B7ADD;
color: white;
-webkit-transition: width 0.3s ease;
}
.search.open {
width: 400px;
}

.open-search {
text-align: center;
height: 100%;
cursor: pointer;
}

.open-search a {
color: white;
}

.screen-reader {
position: absolute;
top: -9999px;
left: -9999px;
}

.close-search {
display: none;
height: 100%;
width: 400px;
padding: 13px 10px 10px 10px;
}

JavaScript

$(document).ready(function() {

            $(".opener").click(function(e) {
                e.preventDefault();
                $(".search").toggleClass("open");
                $(".open-search").css("display","none");
                $(".close-search").css("display","block");
            });
             $(".close-search").mouseup(function() {
                return false
            });
            $(document).mouseup(function(e) {
                if($(e.target).parent("a.signin").length==0) {
                    $(".open-search").css("display","block");
                    $(".search").removeClass("open");
                    $(".close-search").css("display","none");
                }
            });          

        });