Simple Responsive Tabs with Accordion

gistfile1.txt

<div class="tab-row">
    <a href="#" data-tab="new-vehicles">New Vehicles</a>
    <a href="#" data-tab="used-vehicles">Used Vehicles</a>
    <a href="#" data-tab="new-trailers">New Trailers</a>
    <a href="#" data-tab="used-trailers">Used Trailers</a>
</div>
<div class="tab-group">
    <a href="#" class="new-vehicles tab-acc" data-tab="new-vehicles">New Vehicles</a>
    <div class="tab-content new-vehicles">New Vehicle content</div>
    <a href="#" class="used-vehicles tab-acc" data-tab="used-vehicles">Used Vehicles</a>
    <div class="tab-content used-vehicles">Used Vehicle content</div>
    <a href="#" class="new-trailers tab-acc" data-tab="new-trailers">New Trailers</a>
    <div class="tab-content new-trailers">New Trailers content</div>
    <a href="#" class="used-trailers tab-acc" data-tab="used-trailers">Used Trailers</a>
    <div class="tab-content used-trailers">Used Trailers content</div>
</div>

gistfile2.css

.tab-row {
    display:block;
}
.tab-row a {
    display: inline-block;
    padding: 10px;
}
.tab-row a.active {
    background: seagreen;
}
@media (max-width:500px){
    .tab-row a {
        display:none;
    }
}
.tab-acc {
    display:none;
}
.tab-acc.active {
    background: seagreen;
}
@media (max-width:500px){
    .tab-acc {
        display:block;
    }
}
.tab-content {
    display:none;
}
.tab-content.active {
    display:block;
}

gistfile3.js

$('.tab-row a, .tab-acc').click(function(e){

    var tab = $(this).data('tab');
    
    //Highlight the tab row & accordion links
    $('.tab-row a, .tab-acc').removeClass('active');
    $('*[data-tab = '+tab+']').addClass('active');
    
    //Display content
    $('.tab-content').removeClass('active')
    $('.'+tab).addClass('active')
    
    e.preventDefault()

})

http://jsfiddle.net/aq8oc4hk/