Hello Reader's
In this article I will guide you how to create custom responsive tabs without use of any Jquery plugin.
This will surely make your web page faster because its not an plugin. Its an simple custom Jquery HTML & css.

Copy and paste the code & see result

Here is the HTML

<div class="wrapper">
        <div class="tabs">
            <ul id="tabs">
              <li><a href="#" data-tab="tab1">Tab 1</a></li>
              <li><a href="#" data-tab="tab2">Tab 2</a></li>
              <li><a href="#" data-tab="tab3">Tab 3</a></li>
              <li><a href="#" data-tab="tab4">Tab 4</a></li>
            </ul>
        </div>
        <div class="tabsContent">
            <div class="tabDiv" id="tab1">
                <h2>You Clicked Tab 1</h2>
                <p>Type your content text here...........</p>
            </div>
            <div class="tabDiv hide" id="tab2">
                <h2>You Clicked Tab 2</h2>
                <p>Type your content text here...........</p>
            </div>
            <div class="tabDiv hide" id="tab3">
                <h2>You Clicked Tab 3</h2>
                <p>Type your content text here...........</p>
            </div>
            <div class="tabDiv hide" id="tab4">
                <h2>You Clicked Tab 4</h2>
                <p>Type your content text here...........</p>
            </div>
        </div>
    </div>

Here is the Css

*{padding: 0px;margin: 0px;}
        body{font: 14px/1 'Open Sans', sans-serif;}
        .wrapper{margin: 0px auto;width: 1170px;}
        .tabs{margin-top: 10px;}
        .tabs li{display: inline-block;margin-right: 5px;}
        .tabs li a{text-decoration: none;
              padding: 9px 15px;
              display:block;
              border-radius: 3px 3px 0px 0px;
              background: #7FB5DA;
              font-size: 16px;
              font-weight: 600;
              color: #fff;
              border: 1px solid #000;
              border-bottom: none;
              text-align: center;
        }
        .tabs li a:hover, .tabs li a.active, .tabs li a:focus{background: #ddd;color:#4c4c4c;}
        .tabsContent{background: #fff;padding: 10px;border: 1px solid #000;}
        .tabsContent .tabDiv h2{font-weight: normal;}
        .tabsContent .tabDiv p{margin-top: 5px;}
        .hide{display: none;}

Here is the Media Css

@media (max-width:1169px){
            .wrapper{width: 90%;margin: auto;}
        }

        @media (max-width:480px){
            .tabs li{width: 47%;margin: 0px 1% 10px;}
            .tabs{margin: 10px 0px;}
            .tabs li a{
              border-radius: 3px;
              border: 1px solid #000;
            }
        }

Here is the Jquery

(function() {
        $('#tabs a').on('click', function() {
            var showTabId = $(this).data('tab');
            $('.tabDiv').addClass('hide');
            $('#' + showTabId).removeClass('hide');
        })
    })();