CSS Tab Holder

Developer
Saysora
Size
3,445 Kb
Views
38,456
  1. CSS Tab Holder Previews
  2. CSS Tab Holder HTML Codes
  3. CSS Tab Holder CSS Codes
  4. CSS Tab Holder JS Codes

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 Previews
IQ Test

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");
});
CSS Tab Holder - Script Codes
CSS Tab Holder - Script Codes
Home Page Home
Developer Saysora
Username azureknight
Uploaded August 26, 2022
Rating 3
Size 3,445 Kb
Views 38,456
Do you need developer help for CSS Tab Holder?

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!

Saysora (azureknight) Script Codes
Name
Beautiful Ribbon
A Pen by Saysora
Responsive Background
Flat UI Login
Service Card Animation
CSS Browser
Life Mottos
Flat Ui Rollover Buttons
Simple Video Lightbox
Value vs Placeholder
Create amazing blog posts with AI!

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!