Dynamic CSS Page
HTML gives webpages structure and content.
CSS gives webpages style.
JavaScript CSS makes webpages interactive.
Tabbed Content
Tab 1
I'd just like to interject for a moment. What you're referring to as Linux, is in fact, GNU/Linux, or as I've taken to calling it, GNU plus Linux.
Tab 2
No Richard, it's Linux, not GNU/Linux.
Tab 3
I use Alpine, a distro without the GNU coreutils or any other GNU code. It's Linux, but it's not GNU/Linux.
<div class="tab-content">
<input type="radio" id="tab1" name="tabs" checked=""/>
<label for="tab1">Tab 1</label>
<div class="tab">
<h3>Tab 1</h3>
<p>I'd just like to interject for a moment. What you're referring to as Linux, is in fact, GNU/Linux, or as I've taken to calling it, GNU plus Linux.</p>
</div>
<input type="radio" id="tab2" name="tabs"/>
<label for="tab2">Tab 2</label>
<div class="tab">
<h3>Tab 2</h3>
<p>No Richard, it's Linux, not GNU/Linux.</p>
</div>
<input type="radio" id="tab3" name="tabs"/>
<label for="tab3">Tab 3</label>
<div class="tab">
<h3>Tab 3</h3>
<p>JavaScript and its consequences have been a disaster for the human race.</p>
</div>
</div>
.tab-content {
display: flex;
flex-wrap: wrap;
}
.tab-content > input[type="radio"] {
display: none;
}
.tab-content > label {
background-color: #bbb;
padding: 5px;
margin: 2px;
order: 1;
}
.tab-content > label:hover {
background-color: #ccc;
}
.tab-content > .tab {
display: none;
overflow: auto;
order: 2;
}
.tab-content > input[type="radio"]:checked + label + .tab {
display: initial;
width: 100%;
padding: 5px;
background-color: #fff;
}
.tab-content > input[type="radio"]:checked + label {
background-color: #fff;
font-weight: bold;
}
Closable Dialog
This website doesn't use cookies.
<input class="dialog-toggle" type="checkbox" id="dialog-toggle" checked=""/>
<div class="dialog">
<label class="dialog-close" for="dialog-toggle">X</label>
<p class="dialog-msg">This website doesn't use cookies.</p>
</div>
.dialog {
background-color: #8f8;
width: 100%;
}
.dialog-close {
float: right;
cursor: pointer;
background-color: #6d6;
margin: 0.25em;
padding: 0.25em;
padding-bottom: 0;
}
.dialog-msg {
clear: left;
padding: 0.5em;
margin: 0;
}
.dialog-toggle, .dialog-toggle + .dialog {
display: none;
}
.dialog-toggle:checked + .dialog {
display: inline-block;
}
Accordion
Item 1
CSS Sandwich
Item 2
onclick="check_a_box_instead()"
Item 3
Web 1.5?
<input class="accordion-toggle" type="checkbox" id="acc1-toggle"/>
<label for="acc1-toggle">Item 1</label>
<div class="accordion-content">
<h3>Item 1</h3>
<p>CSS Sandwich</p>
</div>
<input class="accordion-toggle" type="checkbox" id="acc2-toggle"/>
<label for="acc2-toggle">Item 2</label>
<div class="accordion-content">
<h3>Item 2</h3>
<p>onclick="check_a_box_instead()"</p>
</div>
<input class="accordion-toggle" type="checkbox" id="acc3-toggle"/>
<label for="acc3-toggle">Item 3</label>
<div class="accordion-content">
<h3>Item 3</h3>
<p>Web 1.5?</p>
</div>
.accordion-toggle, .accordion-toggle + label + .accordion-content {
display: none;
}
.accordion-toggle:checked + label + .accordion-content {
display: block;
}
.accordion-toggle + label {
display: block;
background-color: #aaa;
padding: 0.5em;
}
.accordion-toggle + label:hover, .accordion-toggle:checked + label {
background-color: #bbb;
}
.accordion-content {
background-color: #fff;
padding: 5px;
}
Slideshow
<div class="slideshow">
<input type="radio" name="slideshow-items" id="slideshow-item1" checked=""/>
<div class="slideshow-item">
<label for="slideshow-item3" class="slideshow-control prev">Previous</label>
<label for="slideshow-item2" class="slideshow-control next">Next</label>
<img class="slideshow-content" src="slideshow1.jpg"/>
</div>
<input type="radio" name="slideshow-items" id="slideshow-item2"/>
<div class="slideshow-item">
<label for="slideshow-item1" class="slideshow-control prev">Previous</label>
<label for="slideshow-item3" class="slideshow-control next">Next</label>
<img class="slideshow-content" src="slideshow2.jpg"/>
</div>
<input type="radio" name="slideshow-items" id="slideshow-item3"/>
<div class="slideshow-item">
<label for="slideshow-item2" class="slideshow-control prev">Previous</label>
<label for="slideshow-item1" class="slideshow-control next">Next</label>
<img class="slideshow-content" src="slideshow3.jpg"/>
</div>
</div>
.slideshow > input, .slideshow-item {
display: none;
}
.slideshow > input:checked + .slideshow-item {
display: inline-block;
}
.prev {
float: left;
}
.next {
float: right;
}
.slideshow-content {
clear: left;
width: 100%;
}
.slideshow-control {
background-color: #000;
color: #fff;
padding: 0.5em 0;
width: 50%;
text-align: center;
cursor: pointer;
}
.slideshow-control:hover {
background-color: #222;
}
See also
- You Don't Need JavaScript for more dynamic CSS examples