Created
October 13, 2022 16:13
-
-
Save koolamusic/32e0c2a549545f486c61465df5fe001c to your computer and use it in GitHub Desktop.
A pure HTML, CSS & JS implementation of tabs > inspired by https://www.w3schools.com/howto/howto_js_tabs.asp
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| body {font-family: Arial;} | |
| /* Style the tab */ | |
| .tab { | |
| overflow: hidden; | |
| border: 1px solid #ccc; | |
| background-color: #f1f1f1; | |
| } | |
| /* Style the buttons inside the tab */ | |
| .tab button { | |
| background-color: inherit; | |
| float: left; | |
| border: none; | |
| outline: none; | |
| cursor: pointer; | |
| padding: 14px 16px; | |
| transition: 0.3s; | |
| font-size: 17px; | |
| } | |
| /* Change background color of buttons on hover */ | |
| .tab button:hover { | |
| background-color: #ddd; | |
| } | |
| /* Create an active/current tablink class */ | |
| .tab button.active { | |
| background-color: #ccc; | |
| } | |
| /* Style the tab content */ | |
| .tabcontent { | |
| display: none; | |
| padding: 6px 12px; | |
| -webkit-animation: fadeEffect 1s; | |
| animation: fadeEffect 1s; | |
| } | |
| /* Fade in tabs */ | |
| @-webkit-keyframes fadeEffect { | |
| from {opacity: 0;} | |
| to {opacity: 1;} | |
| } | |
| @keyframes fadeEffect { | |
| from {opacity: 0;} | |
| to {opacity: 1;} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h3>Fade in Tabs</h3> | |
| <div class="tab"> | |
| <button class="tablinks" onclick="openCity(event, 'London')">London</button> | |
| <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> | |
| <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> | |
| </div> | |
| <div id="London" class="tabcontent"> | |
| <h3>London</h3> | |
| <p>London is the capital city of England.</p> | |
| </div> | |
| <div id="Paris" class="tabcontent"> | |
| <h3>Paris</h3> | |
| <p>Paris is the capital of France.</p> | |
| </div> | |
| <div id="Tokyo" class="tabcontent"> | |
| <h3>Tokyo</h3> | |
| <p>Tokyo is the capital of Japan.</p> | |
| </div> | |
| <script> | |
| function openCity(evt, cityName) { | |
| 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(cityName).style.display = "block"; | |
| evt.currentTarget.className += " active"; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment