title: jquery - Aminate just the element clicked and hide another one
body: <p>I am trying to create a menu. When a menu element is clicked I want to animate the width of its border-bottom. 
  My problem here is that I cannot find the way how to bring the border-bottom width to '0' when another element is clicked. </p>
  
  <p>Any solution?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#hww, #proj, #digi, #cont").click(function(){
   
   $( this ).animate({
     
     borderBottomWidth: "10px",
     }, 200 );
     
     
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.menu_text {
   
   opacity: 1;
   font-size: 20px;
  
   margin-right: 100px;
   
   padding-left: 0px;
   cursor: pointer;
   border: 0px solid black;
   border-bottom: 1px solid rgba(0,0,0,0.5);
   border-bottom-width: 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="menu_bar"&gt;
    &lt;div id="menu_box"&gt;
    &lt;div id="cont" class="menu_text"&gt;CONTACT&lt;/div&gt;
    &lt;div id="digi" class="menu_text"&gt;DIGITAL SERVICES&lt;/div&gt;
   
   &lt;div id="proj" class="menu_text"&gt;PROJECTS&lt;/div&gt;
   &lt;div id="hww" class="menu_text"&gt;HOW WE WORK&lt;/div&gt;
   
    &lt;/div&gt;
  &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>