Show Hide Search Box And Social Profil

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class='search-sosprofil'>
  <div id='search-box'>
    <form action='/search' method='get'>
      <input id='search-form' itemprop='query-input' name='q' placeholder='Search here and hit enter' required='required' type='text' />
      <button class='search-button' title='Search' type='submit'><i class='fa fa-search'></i></button>
    </form>
  </div>
  <div class='sos-profil' id='sos-profil'>
    <ul>
      <li><a href='https://www.facebook.com/your-username' target='_blank' title='Facebook'><i class='fa fa-facebook-square fa-lg'></i></a></li>
      <li><a href='https://twitter.com/your-username' target='_blank' title='Twitter'><i class='fa fa-twitter-square fa-lg'></i></a></li>
      <li><a href='https://www.google.com/your-username' target='_blank' title='Google+'><i class='fa fa-google-plus-square fa-lg'></i></a></li>
      <li><a href='id.linkedin.com/in/your-username' target='_blank' title='LinkedIn'><i class='fa fa-linkedin-square fa-lg'></i></a></li>
      <li><a href='//www.youtube.com/c/your-username' target='_blank' title='Youtube'><i class='fa fa-youtube-square fa-lg'></i></a></li>
    </ul>
  </div>

  <div class='search-icon' onclick='openSosprofil()'>
    <div class="fa-stack" id="search-icon">
      <i class="fa fa-square fa-stack-2x"></i>
      <i class="fa fa-search fa-stack-1x"></i>
    </div>
    <div class="fa-stack" id="close-icon">
      <i class="fa fa-square fa-stack-2x"></i>
      <i class="fa fa-times fa-stack-1x"></i>
    </div>
  </div>

</div>

CSS

.search-sosprofil {
  position: relative;
  width: 250px;
}

#search-box {
  width: 100%;
  padding-right: 38px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#search-box form {
  position: absolute;
  top: 0;
  right: 38px;
  display: block;
  height: 30px;
  padding: 0;
  margin: 0px;
  border: 1px solid #dedede;
  border-radius: 3px;
  line-height: 30px;
  background: #fff;
}

#search-form,
.search-button {
  border: none!important;
  line-height: 28px
}

#search-form {
  color: gray;
  width: 100%;
  padding: 0 30px 0 10px;
  height: 28px;
  font-size: 14px;
  margin: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.search-button {
  padding: 0 10px;
  text-align: center;
  margin: 0;
  top: 1px;
  right: 1px;
  font-size: 16px;
  color: #888;
  position: absolute;
  background: none;
  cursor: pointer;
}

#search-form:focus,
#search-form:hover,
.search-button:focus,
.search-button:hover {
  border: none;
  outline: 0;
  color: #000
}

.sos-profil {
  position: absolute;
  top: 2px;
  right: 38px;
}

.sos-profil ul {
  padding: 0!important;
  margin: 0!important;
}

.sos-profil li {
  display: inline-block;
  margin-left: 5px
}

.sos-profil a {
  color: #555;
  font-weight: 500;
  font-size: 24px
}

.sos-profil a:hover {
  color: #000!important
}

#search-box,
#close-icon {
  display: none;
}

.search-icon {
  color: #555;
  float: right;
  cursor: pointer;
}

.search-icon .fa-search,
.search-icon .fa-times {
  color: #fff;
}

JavaScript

function openSosprofil() {
    var e = document.getElementById("sos-profil");
    "none" !== e.style.display ? e.style.display = "none" : e.style.display = "block";
    var e = document.getElementById("search-box");
    "block" !== e.style.display ? e.style.display = "block" : e.style.display = "none";
    var e = document.getElementById("search-icon");
    "none" !== e.style.display ? e.style.display = "none" : e.style.display = "block";
    var e = document.getElementById("close-icon");
    "block" !== e.style.display ? e.style.display = "block" : e.style.display = "none";
  };