title: Unable to show and hide text with fade effect on click
body: <p>I was trying to create a similar effect on up and down arrows as shown in the image below but got stuck midway because of my low javascript/jquery skills.</p>
  
  <p>I can't figure out how to make the text appear and then fade away on click with color change.</p>
  
  <p><a href="https://jsfiddle.net/rahulxdd/qze7mqj4/2/" rel="nofollow noreferrer">Here's a link to the fiddle just in case SO code snippet doesn't work</a></p>
  
  <p><img src="https://i.imgur.com/8ErHGCf.gif" alt=""></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("span").click(function() {
      $("span").css("color", "grey");
      $(this).css("color", "red");
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul &gt; li{
    list-style:none;
  } 
  span {
      cursor: pointer;
  }
  
  .fa {
      font-size: 55px;
      text-indent: 200px;
      margin-bottom: 20px;
      margin-top:30px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;span id='select1'&gt;&lt;i class="fa fa-long-arrow-up" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span id='select2'&gt;&lt;i class="fa fa-long-arrow-down" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So far none of the answers have worked for me so I am asking for more help on this.</p>
  
  <p>I saw this effect on <a href="https://www.reddit.com/r/RealGirls/comments/2xkdrj/hair_up_or_down/" rel="nofollow noreferrer">reddit</a> and I've tried many times and spent so much time but failed to get the similar effect. I'd really appreciate it if anybody could help me understand and create the exact effect.</p>