title: Change display and icon when click on <a> element
body: <p>I want to know how to change display style and  element class when I click on  element:
  and also I'm loading " jquery.min.js version: 2.1.4 " and " bootstrap.min.js "</p>
  
  <p><strong>Before</strong> click on  element:</p>
  
  <pre><code>&lt;ul class"nav navbar-nav" &gt;
  &lt;li class="nav-item search"&gt;
  &lt;!-- this a element --&gt;
  
              &lt;a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts"&gt;
                &lt;i class="fa fa-fw fa-search"&gt;&lt;/i&gt;
  
                &lt;span class="sr-only"&gt;
                  Search
                &lt;/span&gt;
              &lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"&gt;&lt;/progress&gt;
      &lt;/nav&gt;
      &lt;div class="search-area"&gt;
        &lt;div class="container"&gt;
          &lt;div class="search-area-input"&gt;
            &lt;input placeholder="Search articles" type="text"&gt;
          &lt;/div&gt;
          &lt;div class="search-area-results index"&gt;
            &lt;ol class="article-index-list"&gt;&lt;/ol&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And <strong>after</strong> click on  element:</p>
  
  <pre><code>&lt;nav class="nav navbar-nav"&gt;
  &lt;li class="nav-item search"&gt;
  &lt;!-- this a element --&gt;
  
              &lt;a class="nav-link search-toggle" href="#" title="Search articles"&gt;
                &lt;i class="fa fa-fw fa-times" title="Close search"&gt;&lt;/i&gt;
  
                &lt;span class="sr-only"&gt;
                  Search
                &lt;/span&gt;
              &lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"&gt;&lt;/progress&gt;
      &lt;/nav&gt;
      &lt;div class="search-area" style="display: block;"&gt;
        &lt;div class="container"&gt;
          &lt;div class="search-area-input"&gt;
            &lt;input placeholder="Search articles" type="text"&gt;
          &lt;/div&gt;
          &lt;div class="search-area-results index"&gt;
            &lt;ol class="article-index-list"&gt;&lt;/ol&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>