Remove border beneath selected tab

Question

Can someone please show me how to remove the border beneath the selected tab? I have tried various ways to no avail.

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.

EDIT: Here is the simplified HTML with the jquery at the bottom

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
    $(function() {
        $( "#faq_accordion_stu" ).accordion({
            collapsible: true,
            heightStyle: "content", 
            active: false, 
        });
     });
</script>
<script>
    $(function() {
        $( "#faq_accordion_emp" ).accordion({
            collapsible: true,
            heightStyle: "content", 
            active: false
        });
    });
</script>

<section id="qa-main">  

<div class="container">

<ul class="tabs">
    <li class="tab-link current" data-tab="tab-1"><h2 id="q-header">For Students</h2></li>
    <li class="tab-link" data-tab="tab-2"><h2 id="q-header">For Employers</h2></li>
</ul>

    <div id="faq-accordion" class="large-10 columns">

    <div id="tab-1" class="tab-content current">
        <div class="large-12 column">
            <div id="faq_accordion_stu">'
            <h3 class='accordion-q'>Question</h3>
            <div><p class='accordion-a'> Answer </p>


            </div>
        </div>
    </div>

    <div id="tab-1" class="tab-content current">
        <div class="large-12 column">
            <div id="faq_accordion_stu">'
            <h3 class='accordion-q'>Question</h3>
            <div><p class='accordion-a'> Answer </p>


            </div>
        </div>
    </div>

    </div> <!-- end faq-accordion -->
</div> <!-- end container-->

</section> <!-- end section qa-main -->

CSS:

.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; 
}

JQUERY:

<script> 
    $(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');
    })

})
</script>

Answer 1

One approach would be to have your active tab (.current) directly overlap the border of your content container (#faq-accordion) DIV while the non active tabs sit below the content container.

To do this there's two steps that need to be done:

1. Position the tabs so that their border and the content container's border overlap. We can do this by pulling the tabs down in some way or the content container up in some way.
2. Make sure the tabs are above the content container in the stack order of elements. By default, elements that appear in the markup later will stack above those that came before them in the markup. We will have to overcome the default stacking.

Position Tabs

You can pull up the content container #faq-accordion by setting a negative margin on your tabs:

ul.tabs li {
    margin-bottom: -1px; /* adjust as needed */
}

Hide Border

Then change the stacking order for the currently active/select tab, which hides the content container's border behind your tab.

ul.tabs li.current {
    position: relative;
    z-index: 5;
}

Answer 2

You simply need to set border-bottom to none in your ul.tabs > li.current css block:

ul.tabs li.current{
    background: #ededed;
    color: #222;
    background-color: white;
    border-bottom: none;
}