title: Remove border beneath selected tab
body: <p>Can someone please show me how to remove the border beneath the selected tab? I have tried various ways to no avail. </p>
  
  <p>I have tried adding a negative margin to the tab as well as creating a white border but since the border I am trying to cover is from the content block and not the tab I am at a loss. </p>
  
  <p>EDIT: Here is the simplified HTML with the jquery at the bottom</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(function() {
          $( "#faq_accordion_stu" ).accordion({
              collapsible: true,
              heightStyle: "content", 
              active: false, 
          });
       });
  &lt;/script&gt;
  &lt;script&gt;
      $(function() {
          $( "#faq_accordion_emp" ).accordion({
              collapsible: true,
              heightStyle: "content", 
              active: false
          });
      });
  &lt;/script&gt;
  
  &lt;section id="qa-main"&gt;  
  
  &lt;div class="container"&gt;
  
  &lt;ul class="tabs"&gt;
      &lt;li class="tab-link current" data-tab="tab-1"&gt;&lt;h2 id="q-header"&gt;For Students&lt;/h2&gt;&lt;/li&gt;
      &lt;li class="tab-link" data-tab="tab-2"&gt;&lt;h2 id="q-header"&gt;For Employers&lt;/h2&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
      &lt;div id="faq-accordion" class="large-10 columns"&gt;
  
      &lt;div id="tab-1" class="tab-content current"&gt;
          &lt;div class="large-12 column"&gt;
              &lt;div id="faq_accordion_stu"&gt;'
              &lt;h3 class='accordion-q'&gt;Question&lt;/h3&gt;
              &lt;div&gt;&lt;p class='accordion-a'&gt; Answer &lt;/p&gt;
  
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="tab-1" class="tab-content current"&gt;
          &lt;div class="large-12 column"&gt;
              &lt;div id="faq_accordion_stu"&gt;'
              &lt;h3 class='accordion-q'&gt;Question&lt;/h3&gt;
              &lt;div&gt;&lt;p class='accordion-a'&gt; Answer &lt;/p&gt;
  
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/div&gt; &lt;!-- end faq-accordion --&gt;
  &lt;/div&gt; &lt;!-- end container--&gt;
  
  &lt;/section&gt; &lt;!-- end section qa-main --&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.container{
      width: 800px;
      margin: 0 auto;
      padding-top: 2em;
  }
  
  ul.tabs{
      margin: 0px;
      padding: 0px;
      list-style: none;
  }
  
  ul.tabs li{
      background: none;
      color: #222;
      display: inline-block;
      padding: 10px 15px;
      cursor: pointer;
      border-top: 2pt solid #EF5A32;
      border-left: 2pt solid #EF5A32;
      border-right: 2pt solid #EF5A32;
      background-color: white;
      margin-right: 1rem;
  }
  
  ul.tabs li.current{
      background: #ededed;
      color: #222;
      background-color: white;
  }
  
  .tab-content{
      display: none;
      background: #ededed;
      padding: 15px;
  
  }
  
  .tab-content.current{
      display: inherit; 
  }
  </code></pre>
  
  <p><strong>JQUERY:</strong></p>
  
  <pre><code>&lt;script&gt; 
      $(document).ready(function(){
  
      $('ul.tabs li').click(function(){
          var tab_id = $(this).attr('data-tab');
  
          $('ul.tabs li').removeClass('current');
          $('.tab-content').removeClass('current');
  
          $(this).addClass('current');
          $("#"+tab_id).addClass('current');
      })
  
  })
  &lt;/script&gt;
  </code></pre>