<tutorialjinni.com/>

Simple JavaScript Tabs (Horizontal) 1

Posted Under: CSS3, HTML5, JavaScript, Snippets, Tabs, Template on Feb 22, 2020
Simple JavaScript Tabs (Horizontal) 1
Tabs are great to present different pieces of information in same space. Below code snippt create Tabs using pure HTML,CSS and javascript. 
<html>
    <head>
        <title>Simple Horizontal HTML Tabs Example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            /* Style the tab */
            .tab {
                overflow: hidden;
                border: 1px solid #ccc;
                background-color: #f1f1f1;
            }
            .tab a {
                background-color: inherit;
                float: left;
                border: none;
                outline: none;
                cursor: pointer;
                padding: 14px 16px;
                transition: 0.3s;
            }
            .tab a:hover {
                background-color: #ddd;
            }
            .tab a.active {
                background-color: #ccc;
            }
            @keyframes fadeEffect {
                from {opacity: 0;}
                to {opacity: 1;}
            }
            .tabcontent {
                display: none;
                padding: 6px 12px;
                border: 1px solid #ccc;
                border-top: none;
                animation: fadeEffect 1s; /* Fading effect takes 1 second */
            }
        </style>
    </head>
    <body>
        <!-- Tab Navigation -->
        <div class="tab">
            <a class="tablinks" onclick="openTab(event, 'Tab1')">Action</a>
            <a id="defaultTab" class="tablinks" onclick="openTab(event, 'Tab2')">Adventure</a>
            <a class="tablinks" onclick="openTab(event, 'Tab3')">Drama</a>
            <a class="tablinks" onclick="openTab(event, 'Tab4')">Thriller</a>
        </div>

        <!-- Tab Data -->
        <div id="Tab1" class="tabcontent">
            <h3>Action Genre</h3>
            <p>An action story is ...</p>
        </div>

        <div id="Tab2" class="tabcontent">
            <h3>Adventure Genre</h3>
            <p>An adventure story is about a ....</p>
        </div>

        <div id="Tab3" class="tabcontent">
            <h3>Drama Genre</h3>
            <p>Within film, television ...</p>
        </div>
        
        <div id="Tab4" class="tabcontent">
            <h3>Thriller Genre</h3>
            <p>A Thriller is a story that..</p>
        </div>
        
        <!-- JavaScript to control Tabs -->
        
        <script>
            //Open a default tab on window load
            window.addEventListener("load",function(){
                document.getElementById("defaultTab").click();
            });
            
            function openTab(evt, tabid) {
                var i, tabcontent, tablinks;
                tabcontent = document.getElementsByClassName("tabcontent");
                for (i = 0; i < tabcontent.length; i++) {
                    tabcontent[i].style.display = "none";
                }
                tablinks = document.getElementsByClassName("tablinks");
                for (i = 0; i < tablinks.length; i++) {
                    tablinks[i].className = tablinks[i].className.replace(" active", "");
                }
                document.getElementById(tabid).style.display = "block";
                evt.currentTarget.className += " active";
            }
        </script>
    </body>
</html>
Run above code Simple HTML Tabs Example


imgae