I need to have vertical menu whenever I click each of my tab and show some items...When one item is clicked I need to see the content under each item. Here is the output I need..
So I have used below code but I have no idea about the menu items under each item.
body {
background: #ccc;
font-family: 'Roboto', sans-serif;
}
.mytabs {
display: flex;
flex-wrap: wrap;
max-width: 600px;
margin: 50px auto;
padding: 25px;
}
.mytabs input[type="radio"] {
display: none;
}
.mytabs label {
padding: 25px;
background: #e2e2e2;
font-weight: bold;
}
.mytabs .tab {
width: 100%;
padding: 20px;
background: #fff;
order: 1;
display: none;
}
.mytabs .tab h2 {
font-size: 3em;
}
.mytabs input[type='radio']:checked + label + .tab {
display: block;
}
.mytabs input[type="radio"]:checked + label {
background: #fff;
}
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<body>
<div class="mytabs">
<input type="radio" id="tab1" name="mytabs" checked="checked">
<label for="tab1">Free</label>
<div class="tab">
<h2>tab1</h2>
</div>
<input type="radio" id="tab2" name="mytabs">
<label for="tab2">Silver</label>
<div class="tab">
<h2>tab2</h2>
</div>
<input type="radio" id="tab3" name="mytabs">
<label for="tab3">Gold</label>
<div class="tab">
<h2>tab3</h2>
</div>
</div>
</body>
At the moment I could get the tabbed layout without items menu. Can someone show me how to improve my code?
Related
I would like some assistance with my accordion code,
My idea is to get something like this:
The Radio Button Method adds a hidden radio input and a label tag to each accordion tab.
The logic is straightforward:
when a user selects a tab, they essentially check the radio button associated with that tab.
when a user clicks the next tab in the accordion, the next radio button is selected, and so on.
Only one tab can be open at a time using this method.
I'd like some advice on how to incorporate this into my current accordion code.
<!doctype html>
<html>
<head>
<style>
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #6AAB95;
border-radius: 3px;
color: #FFF;
transition: ease .5s;
position: relative; /* ADDING THIS IS REQUIRED */
}
label:hover {
background: #4E8774;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #E2E5F6;
padding: 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 3px;
}
input + label + .collapse {
display: none;
}
input:checked + label + .collapse {
display: block;
}
</style>
</head>
<body>
<input type="checkbox" id="title1" />
<label for="title1">Accordion 1</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
<input type="checkbox" id="title2" />
<label for="title2">Accordion 2</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
</body>
</html>
No need to change the CSS (at least the part handling the accordion functionality) but you'd have to change a bit in your HTML.
To get the desired accordion effect where only one tab can be open at a time you should:
use radio buttons instead of checkboxes (input[type="radio"]).
And the important part is to give those radio buttons the same name (the attribute name must be the same for all the accordion component's radio buttons) in order to achieve the desired outcome.
Here's a a live demo:
/** nothing changed on the CSS part, see the HTML part for the required changes */
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #6AAB95;
border-radius: 3px;
color: #FFF;
transition: ease .5s;
position: relative;
/* ADDING THIS IS REQUIRED */
}
label:hover {
background: #4E8774;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked+label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #E2E5F6;
padding: 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 3px;
}
input+label+.collapse {
display: none;
}
input:checked+label+.collapse {
display: block;
}
<!-- changed "type=checkbox" to "type=radio" -->
<!-- added the same "name" attribute value for all the radio buttons -->
<input type="radio" name="radio-btn" id="title1" />
<label for="title1">Accordion 1</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
<!-- changed "type=checkbox" to "type=radio" -->
<!-- added the same "name" attribute value for all the radio buttons -->
<input type="radio" name="radio-btn" id="title2" />
<label for="title2">Accordion 2</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
CAUTION: Even though the radio buttons hack works as needed, there is no way you can close all the accordion items after interacting for the first time (you can have a closed accordion initially though).
I have found this example using Sass that looks exactly like what you need: https://codepen.io/alvarotrigo/pen/dyJbqpd.
The example uses radio buttons, such as <input type="radio" id="title1" name="select"/>. Because they have the same name, you can only select one at a time.
In your example, you have checkboxes like in this example at w3schools.com. Using checkboxes, you can tick any number of checkboxes at a time, therefore the current accordion behavior.
Here's a stripped-down version (converted to CSS):
input {
position: absolute;
opacity: 0;
z-index: -1;
}
.tab {
overflow: hidden;
}
.tab-label {
display: flex;
justify-content: space-between;
padding: 1em;
background: #2c3e50;
color: white;
cursor: pointer;
}
.tab-content {
max-height: 0;
padding: 0 1em;
color: #2c3e50;
background: white;
}
input:checked ~ .tab-content {
max-height: 100vh;
padding: 1em;
}
<div class="tab">
<input type="radio" id="rd1" name="rd">
<label class="tab-label" for="rd1">Item 1</label>
<div class="tab-content">Content</div>
</div>
<div class="tab">
<input type="radio" id="rd2" name="rd">
<label class="tab-label" for="rd2">Item 2</label>
<div class="tab-content">Content</div>
</div>
I have slightly changed your code and added another div with overflow: hidden:
/** nothing changed on the CSS part, see the HTML part for the required changes */
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #6AAB95;
border-radius: 3px;
color: #FFF;
transition: ease .5s;
position: relative;
/* ADDING THIS IS REQUIRED */
}
label:hover {
background: #4E8774;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked+label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #E2E5F6;
padding: 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 3px;
}
input+label+.collapse {
display: none;
}
input:checked+label+.collapse {
display: block;
}
<div class="tab">
<input type="radio" id="title1" name="select"/>
<label for="title1">Accordion 1</label>
<div class="collapse">
Your content goes here inside this division with the class "content".
</div>
</div>
<div class="tab">
<input type="radio" id="title2" name="select" />
<label for="title2">Accordion 2</label>
<div class="collapse">
Your content goes here inside this division with the class "content".
</div>
</div>
I am trying to do simple Tabs on my page, so I have 3 tabs and 3 sections for them. Problem is that in first section i can see all sections containers, in second 2 last and in this last. And it should be simple one section for one tab.
What am i missing?
My html and code https://codepen.io/wojsza/pen/XWMOXXm :
.display__tabs {
display: flex;
flex-wrap: wrap; }
.display__tabs--tab {
display: none; }
.display__tabs--tab:checked ~ .display__tabs--label ~ .display__tabs--content {
display: block; }
.display__tabs--label {
cursor: pointer;
padding: 25px;
color: #2e2e2e; }
.display__tabs--label:hover {
color: #aeaeae;
background-color: #2e2e2e;
font-weight: bold;
text-decoration: underline; }
.display__tabs--content {
width: 100%;
padding: 20px;
order: 1;
display: none; }
and html:
<div class="display__tabs">
<input type="radio" class="display__tabs--tab" id="display-module-info" name="module" checked="checked" />
<label class="display__tabs--label" for="display-module-info">Info</label>
<div class="display__tabs--content">
<p>Module</p>
</div>
<input type="radio" class="display__tabs--tab" id="display-module-wsu" name="module" />
<label for="display-module-wsu" class="display__tabs--label">Wsu</label>
<div class="display__tabs--content">
<p>
WSU
</p>
</div>
<input type="radio" class="display__tabs--tab" id="display-module-sections" name="module" />
<label for="display-module-sections" class="display__tabs--label">Sections</label>
<div class="display__tabs--content">
<p>
SECTION
</p>
</div>
</div>
You nearly there! Just need to change the "~" into "+".
You wanna change your css on this part :
From
.display__tabs--tab:checked ~ .display__tabs--label ~ .display__tabs--content {
display: block;
}
To
.display__tabs--tab:checked + .display__tabs--label + .display__tabs--content {
display: block;
}
This caused by the css selector of ~ which select the general sibling, and you wanted to use +, because the radio element that being set to hidden and block, is adjacent sibling. Reference https://levelup.gitconnected.com/understanding-use-of-the-and-symbols-in-css-selectors-95552eb436f5
You can just add a second class to radio inputs, and display__tabs--content. Then, you can just add CSS for each one of them.
.display__tabs {
display: flex;
flex-wrap: wrap;
}
.display__tabs--tab {
display: none;
}
.tab1:checked ~ .display__tabs--label ~ .display__tabs--content.content1 {
display: block;
}
.tab2:checked ~ .display__tabs--label ~ .display__tabs--content.content2 {
display: block;
}
.tab3:checked ~ .display__tabs--label ~ .display__tabs--content.content3 {
display: block;
}
.display__tabs--label {
cursor: pointer;
padding: 25px;
color: #2e2e2e;
}
.display__tabs--label:hover {
color: #aeaeae;
background-color: #2e2e2e;
font-weight: bold;
text-decoration: underline;
}
.display__tabs--content {
width: 100%;
padding: 20px;
order: 1;
display: none;
}
<div class="display__tabs">
<input type="radio" class="display__tabs--tab tab1" id="display-module-info" name="module" checked="checked" />
<label class="display__tabs--label" for="display-module-info">Info</label>
<div class="display__tabs--content content1">
<p>Module</p>
</div>
<input type="radio" class="display__tabs--tab tab2" id="display-module-wsu" name="module" />
<label for="display-module-wsu" class="display__tabs--label">Wsu</label>
<div class="display__tabs--content content2">
<p>
WSU
</p>
</div>
<input type="radio" class="display__tabs--tab tab3" id="display-module-sections" name="module" />
<label for="display-module-sections" class="display__tabs--label">Sections</label>
<div class="display__tabs--content content3">
<p>
SECTION
</p>
</div>
</div>
I'm using the following CSS to display two elements compactly.
.trigger,
/* to hide the checkbox and for more general use */
.gone,
.hidden {
display: none;
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
z-index: -999999;
top: -999999px;
margin: -1px;
padding: 0;
border: 0;
height: 1px;
width: 1px;
min-height: 0;
min-width: 0
}
label {
cursor: pointer
}
.fullverbtable {
display: none
}
.trigger:checked~.fullverbtable {
display: block
}
label {
font-family: 'Fira Sans', sans-serif;
font-size: 15px;
font-weight: normal;
font-style: normal;
color: white;
background-color: #ff4b54;
border-radius: 5px;
padding: 0px 5px;
text-decoration: none;
}
.verb {
display: inline;
}
<div class="verb">
<label for="aimer_larousse_ef_active_10">Conjugaison (voix active)</label>
<input class="trigger" id="aimer_larousse_ef_active_10" type="checkbox">
<div class="fullverbtable">
<link href="larousse_ef.css" rel="stylesheet" type="text/css">abcaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>
<div class="verb">
<label for="aimer_larousse_ef_passive10">Conjugaison (voix passive)</label>
<input class="trigger" id="aimer_larousse_ef_passive10" type="checkbox">
<div class="fullverbtable">
<link href="larousse_ef.css" rel="stylesheet" type="text/css">xyzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</div>
</div>
When expanding both 2 elements, the display is very fine.
I hope the result when expanding only the first element as
Could you please explain on how to do so?
I thought I understood your question if I'm right you want to create something like accordion by using checkboxes but the checkboxes can all be check and even the y share name that's I used the radio
to do so, and I don't want go on you with an invalid HTML that's why you'll find I edit too much but it's simple you'll find what you want
.trigger {
display: none;
}
label {
cursor: pointer
}
.fullverbtable_1,
.fullverbtable_2 {
display: none;
}
input[id="aimer_larousse_ef_active_10"]:checked~.fullverbtable_1,
input[id="aimer_larousse_ef_passive_10"]:checked~.fullverbtable_2 {
display: flex;
}
label {
font-family: 'Fira Sans', sans-serif;
font-size: 15px;
color: white;
background-color: #ff4b54;
border-radius: 5px;
padding: 0px 5px;
}
<div class="inputs">
<label for="aimer_larousse_ef_active_10">Conjugaison (voix active)</label>
<input type="radio" id="aimer_larousse_ef_active_10" name="trigger" class="trigger">
<label for="aimer_larousse_ef_passive_10">Conjugaison (voix passive)</label>
<input type="radio" id="aimer_larousse_ef_passive_10" name="trigger" class="trigger">
<div class="fullverbtable_1">abcaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="fullverbtable_2">xyzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</div>
</div>
<div class="para">
</div>
If you want to expand all of them at the same time you can simply replace radio type to checkbox
.trigger {
display: none;
}
label {
cursor: pointer
}
.fullverbtable_1,
.fullverbtable_2 {
display: none;
}
input[id="aimer_larousse_ef_active_10"]:checked~.fullverbtable_1,
input[id="aimer_larousse_ef_passive_10"]:checked~.fullverbtable_2 {
display: flex;
}
label {
font-family: 'Fira Sans', sans-serif;
font-size: 15px;
color: white;
background-color: #ff4b54;
border-radius: 5px;
padding: 0px 5px;
}
<div class="inputs">
<label for="aimer_larousse_ef_active_10">Conjugaison (voix active)</label>
<input type="checkbox" id="aimer_larousse_ef_active_10" name="trigger" class="trigger">
<label for="aimer_larousse_ef_passive_10">Conjugaison (voix passive)</label>
<input type="checkbox" id="aimer_larousse_ef_passive_10" name="trigger" class="trigger">
<div class="fullverbtable_1">abcaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="fullverbtable_2">xyzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</div>
</div>
<div class="para">
</div>
So the issue I can't seem to solve is how to move the obscured divs under the radio+label buttons.
My Html
My CSS
/*color palette: abls
[lightest to darkest]
#eeeeee
#eaffc4
#b6c399
#6a856a
#333333
*/
body {
background-color: #333333;
font-family: monospace;
display: flex;
justify-content: center;
}
div {
/*background-color: red;*/
width: 100%;
height: 100%;
justify-content: center;
}
/*aesthetics for header*/
.Ghead {
font-size: 250%;
color: #eeeeee;
font-weight: lighter;
text-align: center;
border-color: red;
}
/*color for the 3 lines*/
hr:nth-child(1) {
border-color: #eaffc4;
max-width: 20%;
}
hr:nth-child(2) {
border-color: #b6c399;
max-width: 25%;
}
hr:nth-child(3) {
border-color: #6a856a;
max-width: 30%;
}
/*style for radio button container*/
.mGalD {
position: relative;
/*background-color: blue;*/
display: flex;
}
input[type=radio] {
display:none;
}
/*handles aesthetics of active buttons*/
label {
padding: 5px 7px;
border-radius: 5px;
display: inline-block;
font-size: 14px;
color: #6a856a;
}
input:checked + label {
background-color: #eaffc4;
}
/*handles the appearance of active divs in the display area*/
label + div {
position: relative;
color: red;
border: 2pt solid #eaffc4;
border-radius: 5px;
margin: 5px 0 0 0;
display: none;
max-width: 50%;
}
input:checked + label + div {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="./NewbTests.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="./Assets/SumisoulLogo.png">
<title>Viewport</title>
</head>
<body>
<div>
<h1>
<!--title and aesthetics for the head of the page-->
<div class="Ghead">
Viewport
<hr>
<hr>
<hr>
</div>
</h1>
<!--Labeled Radio buttons which activate css to reveal divs-->
<div class="mGalD">
<input type="radio" name="gal" id="g1" value="1">
<label for="g1">gallery 1</label><div>one</div>
<input type="radio" name="gal" id="g2" value="2">
<label for="g2">gallery 2</label><div>two</div>
<input type="radio" name="gal" id="g3" value="3">
<label for="g3">gallery 3</label><div>three</div>
</div>
</div>
</body>
</html>
I would have linked a few images to illustrate what is happening but I'm limited in links.
In essence;
Before:
(button 1)(button 2)(button 3)
Upon clicking any button:
(button 1)[_______________________] (button 2)(button 3)
The div shows up on the side of the corresponding button.
I don't really know what to do to have it align in a column without separating all of the divs and breaking the inline style of the buttons
Hope this works
body, html {
padding: 0;
margin: 0;
}
body {
background: linear-gradient(top left, red, orange);
}
span {
display: none;
position: absolute;
max-width: 450px;
left: 17px;
top: 48px;
padding: 3px;
min-height: 30px;
border-top: 1px solid #d3d3d3;
}
label {
cursor: pointer;
display: inline-block;
padding: 10px;
margin: 10px 0 0 0;
background: #e0e0e0;
color: black;
}
label:first-child {
margin-left: 10px;
}
input {
display: none;
}
input:checked + span {
display: initial;
}
h3 {
border-top: 1px solid;
padding-top: 5px;
position: absolute;
top: 150px;
left: 15px;
}
<label for="btn_one">Gallery 1</label>
<input type="radio" id="btn_one" name="nesto" checked="checked"/>
<span class="tab1">Gallery One</span>
<label for="btd_two">Gallery 2</label>
<input type="radio" id="btd_two" name="nesto"/>
<span class="tab2">Gallery two</span>
<label for="btd_tree">Gallery 3</label>
<input type="radio" id="btd_tree" name="nesto"/>
<span class="tab2">Gallery Three</span>
I'm making a tab system only with CSS using :target and :checked pseudoclasses, but I have an anchor inside the label, and the label doesn't trigger the :checked.
If you click in the anchor, the :checked doesn't trigger because the click is in the <a> tag, but is inside a <label> that must trigger the radio button. If you click on the border of the tab, you'll see how it triggers the :checked, but not the anchor, so the :target can't be triggered.
Here you are my code, more understandable than the words:
a {
text-decoration: none;
}
.tabs {
position: relative;
}
input {
display: none;
}
.tabs .tab label {
text-decoration: none;
border: 1px solid black;
padding: 2px;
display: inline-block;
top: 2px;
position: relative;
cursor: pointer;
}
.tabs .tab input:checked + label {
background-color: white;
border-bottom: 0;
padding: 4px 2px;
top: 1px;
}
.contents {
border: 1px solid black;
background-color: white;
}
.contents .content {
display: none;
padding: 20px;
}
.contents .content:target {
display: block;
}
<div class="tabs">
<span class="tab">
<input type="radio" name="ch" id="check1">
<label for="check1">
Tab 1
</label>
</span>
<span class="tab">
<input type="radio" name="ch" id="check2">
<label for="check2">
Tab 2
</label>
</span>
<span class="tab">
<input type="radio" name="ch" id="check3">
<label for="check3">
Tab 3
</label>
</span>
</div>
<div class="contents">
<div class="content" id="tab1">Contenido 1</div>
<div class="content" id="tab2"><strong>Contenido 2</strong></div>
<div class="content" id="tab3"><em>Contenido 3</em></div>
</div>
Is there a way to combine :checked and :target pseudoclasses to achieve a complete tab system only with CSS?
Thank you.
EDIT
Here you are the snippet without anchor. Obviously the :target will not be triggered:
a {
text-decoration: none;
}
.tabs {
position: relative;
}
input {
display: none;
}
.tabs .tab label {
text-decoration: none;
border: 1px solid black;
padding: 2px;
display: inline-block;
top: 2px;
position: relative;
cursor: pointer;
}
.tabs .tab input:checked + label {
background-color: white;
border-bottom: 0;
padding: 4px 2px;
top: 1px;
}
.contents {
border: 1px solid black;
background-color: white;
}
.contents .content {
display: none;
padding: 20px;
}
.contents .content:target {
display: block;
}
<div class="tabs">
<span class="tab">
<input type="radio" name="ch" id="check1">
<label for="check1">
Tab 1
</label>
</span>
<span class="tab">
<input type="radio" name="ch" id="check2">
<label for="check2">
Tab 2
</label>
</span>
<span class="tab">
<input type="radio" name="ch" id="check3">
<label for="check3">
Tab 3
</label>
</span>
</div>
<div class="contents">
<div class="content" id="tab1">Contenido 1</div>
<div class="content" id="tab2"><strong>Contenido 2</strong></div>
<div class="content" id="tab3"><em>Contenido 3</em></div>
</div>
When you use input:checked, :target is not efficient cause this event is not triggered at all.
You need to put your input ahead in the flow so you can use the selector ~ to select any sibblings and their children following in the flow of the document:
example
a {
text-decoration: none;
}
.tabs {
position: relative;
}
input {
display: none;
}
.tabs .tab label {
text-decoration: none;
border: 1px solid black;
padding: 2px;
display: inline-block;
top: 2px;
position: relative;
cursor: pointer;
}
#check1:checked ~ .tabs label[for="check1"],
#check2:checked ~ .tabs label[for="check2"],
#check3:checked ~ .tabs label[for="check3"] {
background-color: white;
border-bottom: 0;
padding: 4px 2px;
top: 1px;
}
.contents {
border: 1px solid black;
background-color: white;
}
.contents .content {
display: none;
padding: 20px;
}
#check1:checked ~ .contents #tab1,
#check2:checked ~ .contents #tab2,
#check3:checked ~ .contents #tab3 {
display: block;
}
<!-- begin hidden inputs for CSS tabs purpose -->
<input type="radio" name="ch" id="check1">
<input type="radio" name="ch" id="check2">
<input type="radio" name="ch" id="check3">
<!-- End hidden inputs for CSS tabs purpose -->
<div class="tabs">
<span class="tab">
<label for="check1">
Tab 1
</label>
</span>
<span class="tab">
<label for="check2">
Tab 2
</label>
</span>
<span class="tab">
<label for="check3">
Tab 3
</label>
</span>
</div>
<div class="contents">
<div class="content" id="tab1">Contenido 1</div>
<div class="content" id="tab2"><strong>Contenido 2</strong>
</div>
<div class="content" id="tab3"><em>Contenido 3</em>
</div>
</div>
This behavior is specified in HTML5 (emphasis mine):
The activation behavior of a label element for events
targeted at interactive content descendants of a label
element, and any descendants of those interactive content
descendants, must be to do nothing.
Since the link is interactive content, clicking on it won't check the labeled radio input.