tabs

revision:

Content

toggleable tabs - 01 toggleable tabs - 02 tabs - radio buttons tabs - target selector

toggleable tabs - 01

top

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis justo ex, nec commodo metus pellentesque quis. Suspendisse lobortis eros elit, nec consequat sem posuere et. Aenean varius facilisis elit, a mattis ante bibendum a. Ut eu eleifend velit. Donec accumsan placerat massa quis egestas. Praesent vitae maximus nisl. Nulla ut dui quis purus tincidunt porta nec id eros. Vivamus in metus quis eros gravida finibus in sit amet elit. Maecenas eu sagittis augue. Nulla ut dolor et turpis vestibulum bibendum id at augue. Etiam eu faucibus sem.

Mauris nec magna nisi. Maecenas nec leo ullamcorper tellus eleifend lobortis. Nulla risus orci, porta non diam vitae, posuere efficitur risus. Sed lorem dolor, imperdiet quis condimentum in, posuere quis arcu. Aliquam ex ligula, blandit non elementum non, molestie at metus. Duis vestibulum facilisis leo bibendum vestibulum. Integer ac justo augue. Integer mi turpis, porttitor sit amet orci nec, convallis egestas tortor. Duis convallis sapien ut lorem convallis, nec tristique eros sodales. Quisque placerat elit vel quam condimentum, quis fermentum risus elementum. Donec eget tincidunt nisl, nec laoreet massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at faucibus ligula. Ut eu rhoncus tellus.

Aliquam pretium lacus a ex tincidunt, et aliquet magna feugiat. Suspendisse sagittis condimentum pretium. Aenean a scelerisque arcu, consequat aliquet felis. Cras dictum nulla nec odio tincidunt faucibus. Nullam nec fermentum elit. Duis in velit vitae felis euismod dignissim ullamcorper non nisl. Nullam malesuada faucibus malesuada. Duis sem velit, viverra et diam tempus, convallis sodales orci. Mauris gravida eros at lorem varius dignissim. Vivamus nec nibh lorem.

code: 
                <main>
                    <input type="radio" name="tabs" id="home" checked />
                    <label class="tab-1" for="home">home</label>
            
                    <input type="radio" name="tabs" id="work" />
                    <label class="tab-1" for="work">work</label>
            
                    <input type="radio" name="tabs" id="contact" />
                    <label class="tab-1" for="contact">contact</label>
            
                    <div id="content-home">
                    <p>Lorem ipsum dolor sit amet... Etiam eu faucibus
                        sem.</p>
                    </div>
            
                    <div id="content-work">
                    <p>Mauris nec magna nisi. ... Vivamus at faucibus ligula. Ut eu
                        rhoncus tellus.</p>
                    </div>
            
                    <div id="content-contact">
                    <p>Aliquam pretium lacus a ex tincidunt,.... Vivamus nec nibh lorem.</p>
                    </div>
                </main>
                <style>
                    :root {--blue: #74bcdd; --dark-blue: #2d3e51; --red: #f74442; --yellow: #fbca32; --green: #5be95b;--grey: #ebeced;}
                    /* tabs - 01 */
                    main {padding: 1vw; height: 100%;}
                    [type="radio"] {display: none; }
                    [type="radio"]:checked + .tab-1 {background-color: var(--blue);}
                    .tab-1:hover {text-decoration: underline;}
                    .tab-1 {display: block;float: left; width: calc(93.65% / 3); padding: 0.1vw; background-color: var(--grey); text-align: center;  cursor: pointer;}
                    [id^="content"] {display: none;  padding: 3vw;background-color: var(--blue);}
                    #home:checked ~ #content-home,  #work:checked ~ #content-work, 
                    #contact:checked ~ #content-contact {
                    display: block;}
                </style>

toggleable tabs - 02

top

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.


code: 
                <div class="tab-2">
                    <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>
                <style>
                    :root {--blue: #74bcdd; --dark-blue: #2d3e51; --red: #f74442; --yellow: #fbca32; 
                        --green: #5be95b;--grey: #ebeced;}
                    /* tabs toggeable */
                    .tab-2 {overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1;}
                    .tab-2 button {background-color: inherit; float: left; border: none; outline:
                        none;cursor: pointer;
                    padding: 1vw 1.6vw; transition: 0.3s;}
                    .tab-2 button:hover {background-color: #ddd;}
                    .tab-2 button.active {background-color: #ccc;}
                    .tabcontent {display: none; padding: 0.6vw 1.2vw;  border: 1px solid #ccc; 
                        border-top: none;}
                </style>
                <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>

tabs - radio buttons

top
This is the content of tab 1
This is the content of tab 2
This is the content of tab 3



code: 
                <div class="tabs-3">
                    <div class="tab-3">
                        <input name="checkbox-tabs-group" type="radio" id="checkbox1" class="checkboxtab" checked/>
                        <label for="checkbox1">Tab 1</label>
                        <div class="content">This is the content of tab 1</div>
                    </div>
                    <div class="tab-3">
                        <input name="checkbox-tabs-group" type="radio" id="checkbox2" class="checkboxtab"/>
                        <label for="checkbox2">Tab 2</label>
                        <div class="content">This is the content of tab 2</div>
                    </div>
                    <div class="tab-3">
                        <input name="checkbox-tabs-group" type="radio" id="checkbox3" class="checkboxtab"/>
                        <label for="checkbox3">Tab 3</label>
                        <div class="content">This is the content of tab 3</div>
                    </div>
                </div>
                <style>
                    .tabs-3{margin:1vw; clear: both;}
                    .tab-3{float: left; margin-right: 1vw;}
                    .tab-3 .content{ position: absolute; background-color: white; left: 1vw; width: 30%;  border: 1px #000 solid; margin: 0.5vw;}
                    .checkboxtab{display: none;}
                    .tab-3 label{margin-right: 1vw;}
                    .checkboxtab:checked ~ label{color: #ab70ff; border: 1px #000 solid;}
                    .checkboxtab:checked ~ .content{z-index: 1;}
                </style>

tabs - target selector

top
Tab 4
Content of Tab4
Tab 5
Content of Tab5
Tab 6
Content of Tab6



code: 
                <div class="tabs-4">
                    <div class="tab-4" id="tab4">
                        <a href="#tab4">Tab 4</a>
                        <div class="content">Content of Tab4</div>
                    </div>
                    <div class="tab-4" id="tab5">
                        <a href="#tab5">Tab 5</a>
                        <div class="content">Content of Tab5</div>
                    </div>
                    
                    <div class="tab-4" id="tab6">
                        <a href="#tab6">Tab 6</a>
                        <div class="content">Content of Tab6</div>
                    </div>
                </div><br><br><br>
                <style>
                    /* tabs - :target selector */
                    .tabs-4{position: relative; clear: both;}
                    .tabs-4 .tab-4{float: left; margin-right: 1vw; }
                    .tabs-4 .tab-4:nth-of-type(1) .content{z-index: 1;}
                    .tab-4 .content{position: absolute;	background-color: white; width: 70%;left: 0px;}
                    .tab-4:target a{font-weight: bold;}
                    .tab-4:target .content{z-index: 1;}
                </style>