CSS Tab Holder
How do I make an css tab holder?
Pure CSS attempt at making a tabbed based content area. Add or subtract items, use the a:target to hide and display the content per li in the top. What is a css tab holder? How do you make a css tab holder? This script and codes were developed by Saysora on 26 August 2022, Friday.
CSS Tab Holder - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Tab Holder</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="tabholder"> <ul> <li> <a href="#item1"> Item One </a> </li> <li> <a href="#item2"> Item Two </a> </li> <li> <a href="#item3"> Item Three </a> </li> </ul> <div class="tabcontent"> <div id="item1" class="selected"> <div class="intab"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eleifend volutpat purus non dictum. Phasellus pellentesque vestibulum metus, eu faucibus erat dictum et. Pellentesque porta nunc eget enim ullamcorper ac accumsan nunc egestas. Nunc sed venenatis felis. Pellentesque placerat cursus lectus ac aliquet. Integer ac lacus ac est laoreet pellentesque. Vestibulum ac metus sapien, eget suscipit nunc. Nullam ipsum nulla, tempor vitae ornare vel, semper id risus. Maecenas ultricies elementum risus et iaculis. Nam blandit ultrices tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis magna sem. Cras egestas rhoncus est et posuere. Aliquam non purus metus, sit amet congue nibh.</p> </div> </div> <div id="item2" class="tab"> <div class="intab"> <p>Integer vulputate ultrices gravida. Mauris vel risus a nulla ullamcorper convallis id ac tellus. Vivamus convallis consectetur eleifend. In in lectus arcu, in dictum diam. Aenean vitae urna non nunc pharetra ultrices nec vitae dolor. Suspendisse sed est at urna gravida fermentum vitae eget sapien. Cras a tempus dolor. Ut at tempus odio.</p> </div> </div> <div id="item3" class="tab"> <div class="intab"> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed elit nibh, feugiat nec consequat ut, sollicitudin sit amet lacus. Curabitur molestie interdum mi non scelerisque. Nunc molestie, nulla at convallis facilisis, odio velit lobortis augue, et consectetur velit justo sit amet magna. Phasellus suscipit laoreet felis, vitae malesuada tortor volutpat quis. Donec vitae mauris eu ligula aliquet porta eu ac erat. Aenean consequat malesuada justo vitae gravida. Suspendisse eget vehicula metus. Aliquam erat volutpat. Aenean et nisi vel risus fermentum commodo. Aenean convallis auctor ultricies. Vestibulum et ipsum nisi. Quisque a enim libero, ut tempus nisl.</p> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
CSS Tab Holder - Script Codes CSS Codes
body { font-family: "Helvetica";
}
.tabholder { width: 100%; min-height: 80px;
}
.tabholder ul { min-height: 10px; background: #2a2a2a; border-bottom: 3px solid #27ae60;
}
li { color: #fff; display: inline-block; padding: 15px; margin: 0 0 0 -4px; border-right: 1px solid #a4a4a4; text-transform: uppercase;
}
li:hover { background: #27ae60;
}
a { color: #fff; text-decoration: none;
}
.tab { height: 0; overflow: hidden; color: #000;
}
.tab:target { height: auto;
}
.tab:not(:target) { height: 0;
}
.tabcontent { background: #ecf0f1; min-height: 205px; padding: 0 0 30px; margin-top: -16px;
}
.tab { -webkit-transition: height 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s;
}
.intab { padding: 5px;
}
.selected { height: auto;
}
CSS Tab Holder - Script Codes JS Codes
$("li").click(function() { $("#item1").addClass("tab");
});
Developer | Saysora |
Username | azureknight |
Uploaded | August 26, 2022 |
Rating | 3 |
Size | 3,445 Kb |
Views | 38,456 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Landscape Animation | 3,469 Kb |
Life Mottos | 3,352 Kb |
A Pen by Saysora | 2,253 Kb |
Simple Loading Bar | 2,513 Kb |
Beautiful Ribbon | 1,985 Kb |
Info Cards | 3,926 Kb |
Flat Ui Rollover Buttons | 3,312 Kb |
Grow Circle Animation | 2,075 Kb |
Clean Card Layout | 3,654 Kb |
First Loading Animation | 2,886 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Yuliya v krylova | Rafszul | 37,351 Kb |
Portfolio Page | KaylaMT | 1,983 Kb |
Cool audio | Bigliam | 1,868 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
Playing with transition timing | Mattgrosswork | 1,993 Kb |
Wikipedia Viewer | Thalpha | 4,426 Kb |
404 Page | Saransh | 2,666 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!