Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Create Custom Jquery Tabs

    • 0
    • 4
    • 1
    • 2
    • 0
    • 0
    • 0
    • 0
    • 936
    Comment on it

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


 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: