Tabs

        
            <div class="crn-tabs-ui">
                <div class="tab">
                    <button class="tablinks" onclick="openTab(event, "tab1")">Tab 1</button>
                    <button class="tablinks" onclick="openTab(event, "tab2")">Tab 2</button>
                    <button class="tablinks" onclick="openTab(event, "tab3")">Tab 3</button>
                    <button class="tablinks" onclick="openTab(event, "tab4")">Tab 4</button>
                    <button class="tablinks" onclick="openTab(event, "tab5")">Tab 5</button>
                </div>
                    <div id="tab1" class="tabcontent">
                        <div>
                            Tab Content 1
                        </div> 
                    </div>
                    <div id="tab2" class="tabcontent">
                        <div>
                            Tab Content 2
                        </div> 
                    </div>
                    <div id="tab3" class="tabcontent">
                        <div>
                            Tab Content 3
                        </div> 
                    </div>
                    <div id="tab4" class="tabcontent">
                        <div>
                            Tab Content 4
                        </div> 
                    </div>
                        <div id="tab5" class="tabcontent">
                        <div>
                            Tab Content 5
                        </div> 
                    </div>
            </div>  
                    

        
            function openTab(evt, tabName) {
                let 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(tabName).style.display = "block";
                evt.currentTarget.className += " active";   
            }
            
            
            $(document).ready(function() { 
             setActiveTab(0);
            
                function setActiveTab (index) {
                    let tablink, tabcontent;
                    // Set tab active tab default 0
                    tablink = document.getElementsByClassName("tablinks");
                    for (i = 0; i < tablink.length; i++) {
                        tablink[index].classList.add("active");
                    }
                    tabcontent = document.getElementsByClassName("tabcontent");
                    for (i = 0; i < tabcontent.length; i++) {
                        tabcontent[index].style.display = "block";
                    }
                }  
            }