I found this code on the internet which is fine but I want the section tags first then the inputs, I tried so many times to move the tabs navigation below the content without success.
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
input {
display: none;
}
input:checked+label {
color: #ff0000;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4 {
display: block;
}
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">home</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">about</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">FAQ</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">contact</label>
<section id="content1">
<p>home</p>
</section>
<section id="content2">
<p>about</p>
</section>
<section id="content3">
<p>FAQ</p>
</section>
<section id="content4">
<p>contact</p>
</section>
Any ideas how to move the navigation bar below the content
Thank you
You could try that as below, wrap the section tags by a div and then you could change the positioning of label using position:absolute,
section {
display: none;
padding: 0px 0 0;
border-bottom: 1px solid #ddd;
}
input {
display: none;
}
input:checked+label {
color: #ff0000;
}
#tab1:checked~.wr #content1{
display:block;
}
#tab2:checked~.wr #content2{
display:block;
}
#tab3:checked~.wr #content3{
display:block;
}
#tab4:checked~.wr #content4{
display:block;
}
.wr{
position:relative;
top:0;
display:block;
}
.tb1{
position:absolute;
top:80px;
display:inline-block;
}
.tb2{
position:absolute;
top:80px;
display:inline-block;
left:60px;
}
.tb3{
position:absolute;
top:80px;
display:inline-block;
left:120px;
}
.tb4{
position:absolute;
top:80px;
display:inline-block;
left:180px;
}
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1" class="tb1">home</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2" class="tb2">about</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3" class="tb3">FAQ</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4" class="tb4">contact</label>
<div class="wr">
<section id="content1">
<p>home</p>
</section>
<section id="content2">
<p>about</p>
</section>
<section id="content3">
<p>FAQ</p>
</section>
<section id="content4">
<p>contact</p>
</section>
</div>
Use Navbar technique with <div id="home">.
It will be easy.
Or you can use javascript to make it look more refined.
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #fff;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.main {
padding: 16px;
margin-bottom: 30px;
height: 1500px; /* Used to enable scrolling */
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="navbar">
Home
About
</div>
<div id="home"class="main">
<h1>Home</h1>
</div>
<div id="about"class="main">
<h1>About</h1>
</div>
</body>
</html>
I have changed your code. Please try this code.
a:focus {
outline: none!important;
}
.content-wrap {
background:#eee;
padding:20px;
margin-bottom:10px;
}
.tabs-bottom > .nav-tabs{
border-bottom: 0;
}
.tabs-below > .nav-tabs {
border-bottom: 0;
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
.tabs-bottom > .nav-tabs {
border-top: 1px solid #ddd;
}
.tabs-bottom > .nav-tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
.tabs-bottom > .nav-tabs > li > a {
border-radius: 0 0 4px 4px;
}
.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
border-top-color: #ddd;
border-bottom-color: transparent;
}
.tabs-bottom > .nav-tabs > .active > a,
.tabs-bottom > .nav-tabs > .active > a:hover,
.tabs-bottom > .nav-tabs > .active > a:focus {
border-color: transparent #ddd #ddd #ddd;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<!-- tabs -->
<div class="tabbable tabs-bottom">
<div class="tab-content">
<div class="tab-pane active" id="home">
<div class="content-wrap">
<h2>Home Tab</h2>
<p>test</p>
</div>
</div>
<div class="tab-pane" id="about">
<div class="content-wrap">
<h2>About Tab</h2>
<p>test</p>
</div>
</div>
<div class="tab-pane" id="services">
<div class="content-wrap">
<h2>Services Tab</h2>
<p>test</p>
</div>
</div>
<div class="tab-pane" id="contact">
<div class="content-wrap">
<h2>Contact Tab</h2>
<p>test</p>
</div>
</div>
</div>
<!-- tab content -->
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<!-- /tabs -->
</div>
</div>
</div>
you just need to use CSS display flex for reorder the content :
https://codepen.io/seltix/pen/XaLVaY
<dix id="blockcontainer" >
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">home</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">about</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">FAQ</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">contact</label>
<div class="divider"></div>
<section id="content1">
<p>home</p>
</section>
<section id="content2">
<p>about</p>
</section>
<section id="content3">
<p>FAQ</p>
</section>
<section id="content4">
<p>contact</p>
</section>
</div>
CSS :
section {
display: none;
padding: 20px;
border-bottom: 1px solid #AAA;
background :#EEE;
}
div.divider {
width:100%;
}
input {
display: none;
}
label {
padding: 10px;
}
input:checked + label {
color: #ff0000;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;
}
#blockcontainer {
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
section {
-ms-flex-order: 1;
order: 1;
}
div.divider {
-ms-flex-order: 6;
order: 6;
}
input, label {
-ms-flex-order: 12;
order: 12;
}
Related
I basically need the tab header which current holds values 1,2,3 I would like changed to a favicon logo but because they are label tabs it wont display here is my code:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<section class="home" id="home">
<div class="home-text">
<h1>Horrizion Travel</h1>
</div>
<div class="my-tabs">
<input type="radio" id="tabfree" name="my-tabs" checked="checked">
<label for="tabfree" >1</label>
<div class="tab">
<h2>Air Travel</h2>
<P>This is Tab 1</P>
</div>
<input type="radio" id="tab-2" name="my-tabs">
<label for="tab-2">2</label>
<div class="tab">
<h2>Coach Travel</h2>
<P>This is Tab 2</P>
</div>
<input type="radio" id="tab-3" name="my-tabs">
<label for="tab-3">3</label>
<div class="tab">
<h2>Train Travel</h2>
<P>This is Tab 3</P>
</div>
</div>
</div>
</section>
I added and linked the favicon but it deletes the other tabs when I input it. I think this is because it selects the next lable in order to check it as they are css tabs.
<i class="fa-solid fa-tickets-airline"></i>
`
#dest .my-tabs{
display: flex;
flex-wrap: wrap;
max-width: 1400px;
margin: 50px auto;
padding: 25px;
}
#dest .my-tabs input[type="radio"] {
display: none;
}
#dest .my-tabs label{
padding: 25px;
background-color: #5a7184;
font-weight: bold;
}
#dest .my-tabs .tab{
width:100% ;
padding: 20px;
background-color: #5a7184;
order: 1;
display: none;
}
#dest .my-tabs h2{
font-size: 2em;
}
#dest .my-tabs input[type="radio"]:checked + label + .tab{
display: block;
}
#dest .my-tabs input[type="radio"]:checked + label{
background: var(--main-color);
}
`
Hi i have the following code and i am trying to Color the background of the TDs inside this little Tab i created.
<body>
<nav class="nav_tabs">
<ul>
<li>
<input type="radio" name="tabs" class="rd_tabs" id="tab2">
<label for="tab1">Shutdown</label>
<div class="content">
I tried doing like this on the style sheet:
.nav_tabs #tab2 .content td
{
background: lightcyan;
}
I dont really understand what i am doing wrong but it is not working, i tried different things but nothing.
I cant post the content inside the article but it is mostly tables:
<style>
*
{
margin:0;
padding: 0;
}
body
{
font-family: Arial, Helvetica, sans-serif;
}
.nav_tabs
{
width: 600px;
height: 400px;
margin 100px auto;
background-color: #fff;
position: relative;
}
.nav_tabs ul
{
list-style: none;
}
.nav_tabs ul li
{
float: left;
}
.nav_tabs label
{
width: 100px;
padding: 25px;
background-color: #363b48;
display:block;
color: #fff;
cursor: pointer;
text-align: center;
}
.rd_tabs:checked ~ label
{
background-color: #e54e43;
}
.rd_tabs
{
display: none;
}
.content
{
border-top: 5px solid #e54e43;
background-color: #fff;
display: none;
position: absolute;
height: 320px;
width: 600px;
left: 0;
}
.content article
{
padding 10px;
}
.rd_tabs:checked ~ .content
{
display: block;
}
.nav_tabs .content td
{
background: lightcyan;
}
</style>
<body>
<nav class="nav_tabs">
<ul>
<li>
<input type="radio" name="tabs" class="rd_tabs" id="tab1"
checked>
<label for="tab1">tab1</label>
<div class="content">
<article>
</article>
</li>
<li>
<input type="radio" name="tabs" class="rd_tabs" id="tab2">
<label for="tab2">SHUTDOWN (MINIMUM CONFIGURATION)</label>
<div class="content">
<article>
</article>
</div>
</li>
<li>
<input type="radio" name="tabs" class="rd_tabs" id="tab3">
<label for="tab3">Tab3</label>
<div class="content">
<article>
</article>
</div>
</li>
</ul>
</nav>
</body>
try remove #tab2 in your css
.nav_tabs .content td
{
background: lightcyan;
}
i dont see in your html code something like that id='tab2' between your.nav_tabs and .content .
so probably that's why it doesnt work now
update
if you need change the color of tab2 for example
so you have to add id='tab2' to the <li> element
but it shouldn't be duplicate the id in inputs
i everyone!
I need help, I would like the tabs:
tab1 - tab2 - tab3 remained white after clicking, now in my code in hover it turns white, but then everything vanishes.
How can I do with only css, because js does not support me the system?
Any advice and help is welcome!
Thank you all!!
<style>
body {
font-family:"Open Sans";
background:white;
height:300px;
font-size:14px;
}
.tab section {
display:none;
}
.tab section:target, .tab section:last-of-type {
display:block;
}
.tab section:target~section {
display:none;
}
.L1 {
padding:17px;
border:1px solid #2c3e50;
color:white !important;
padding-left:10px;
padding-right:10px;
margin-left:-1px;
}
.L1:hover {
background-color:white;
color:black !important;
border-bottom:1px solid white;
padding:17px;
padding-left:10px;
padding-right:10px;
}
</style>
<section class="tab" style="border:none;background:#1abc9c;max-width:46.5rem;width:100%;margin:5px auto;height:51px;line-height:51px;">
<a class="L1" href="#tab1">tab1</a>
<a class="L1" href="#tab2" style="margin-left:-5px;">tab2</a>
<a class="L1" href="#tab3" style="margin-left:-5px;">tab3</a>
<section id="tab2" style="margin-top:-60px !important;padding-top:61px;">
<span >hello2</span>
</section>
<section id="tab3" style="margin-top:-60px !important;padding-top:61px;">
<span>hello3</span>
</section>
<section id="tab1" style="margin-top:-60px !important;padding-top:61px;">
<span >hello1</span>
</section>
</section>
input, .content {
display: none;
background: #1f7507;
line-height: 25px;
padding: 5px 25px;
color: #fff;
font: normal 1em/150% Sans-Serif;
min-width: 200px;
}
#one:checked ~ .one,
#two:checked ~ .two,
#three:checked ~ .three {display: block;}
label {
cursor: pointer;
background: #999;
height: 25px;
padding: 5px 10px;
display: inline-block;
text-align: center;
color: #fff;
font: normal 1em/150% Sans-Serif;
margin-right: -3px;
transition: background .25s linear;
}
label:hover, input:checked + label {background: #1f7507;}
h3, p {
text-indent: 25px;
text-align: justify;
}
<input type="radio" name="nav" id="one" checked="checked"/>
<label for="one">tab 1</label>
<input type="radio" name="nav" id="two"/>
<label for="two">tab 2</label>
<input type="radio" name="nav" id="three"/>
<label for="three">tab 3</label>
<article class="content one">
<h3>sample 1</h3>
<p>heyyy</p>
</article>
<article class="content two">
<h3>sample 2</h3>
<p>howdy</p>
</article>
<article class="content three">
<h3>sample 3</h3>
<p>hello</p>
</article>
I have created pure css accordion for mobile and grid view for web.
now i'm facing issue with column width for web view. in current implementation column width is not same for all column.
I want to create an equal column using flex.
Note: this html is responsive for mobile there will be accordion for mobile and for web there will be row.
/*
CSS for the main interaction
*/
.accordion > input[name="collapse"] {
display: none;
/*position: absolute;
left: -100vw;*/
}
/* .accordion label,
.accordion .content{
max-width: 620px;
margin: 0 auto;
} */
.accordion .content {
background: #fff;
overflow: visible;
height: 0;
padding: 10px 0;
}
.accordion > input[name="collapse"]:checked ~ .content {
height: 200px;
transition: height 0.5s;
}
.accordion label {
display: block;
}
.edit-delete .item {
flex-direction: row;
}
.edit-delete a {
padding: 0 10px;
}
/* For Desktop */
#media only screen and (min-width: 1023px) {
.accordion > input[name="collapse"]:checked ~ .content {
height: auto;
}
.accordion .handle {
width: 300px;
}
.handle label,
.content,
.col,
.item {
display: flex;
width: 100%;
}
}
.accordion {
display: flex;
border-bottom: 1px solid #ddd;
}
.accordion > input[name="collapse"]:checked ~ .content {
border-top: 0;
transition: 0.3s;
}
.accordion .handle {
margin: 0;
font-size: 16px;
}
.accordion label {
cursor: pointer;
font-weight: normal;
padding: 10px 0;
user-select: none;
pointer-events: none;
}
/* .accordion label:hover,
.accordion label:focus {
background: #252525;
} */
.accordion .handle label:before {
content: "";
border: solid #008080;
border-width: 0 3px 3px 0;
padding: 4px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
float: right;
margin-top: 2px;
transition: 0.4s;
width: 6px;
height: 6px;
position: absolute;
right: 20px;
}
.handle label:before {
display: none;
}
.accordion > input[name="collapse"]:checked ~ .handle label:before {
content: "";
border: solid #008080;
border-width: 0 3px 3px 0;
padding: 4px;
-webkit-transform: rotate(220deg);
float: right;
margin-top: 2px;
transition: 0.4s;
width: 6px;
height: 6px;
position: absolute;
right: 20px;
}
.accordion p:last-child {
margin-bottom: 0;
}
/* .container{
max-width: 620px;
margin: 0 auto;
} */
.handle label,
.content,
.col {
display: flex;
}
.item {
display: flex;
flex-direction: column;
padding: 0 10px;
}
#media (max-width: 1023px) {
.content {
display: block;
}
.content .col {
padding: 10px 0;
}
.accordion {
flex-direction: column;
position: relative;
}
.accordion .content {
overflow: hidden;
transition: 0.5s;
padding: 0;
}
.accordion label {
pointer-events: all;
}
.handle label:before {
display: block;
}
.edit-delete {
position: absolute;
bottom: 0;
}
.accordion .handle {
height: 100px;
}
.handle .item {
padding: 0 10px;
width: auto;
}
.accordion > input[name="collapse"]:checked ~ .handle {
height: auto;
}
.item {
width: auto;
}
.item span:first-child {
width: 150px;
}
.edit-delete a {
padding-left: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Expand Collapse Text Example</title>
<meta name="author" content="Codeconvey" />
<!-- Font Awesome -->
<!-- Accordion CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="accordion">
<input type="radio" name="collapse" id="handle1" />
<div class="handle">
<label for="handle1">
<div class="item">
<span>Name</span>
<span>xyz</span>
</div>
<div class="item">
<span>Mobile Number</span>
<span>1234567890</span>
</div>
</label>
</div>
<div class="content">
<div class="col">
<div class="item">
<span>Gender</span>
<span>Male</span>
</div>
<div class="item">
<span>Dealership</span>
<span>fsdfsd</span>
</div>
</div>
<div class="col">
<div class="item">
<span>Branch</span>
<span>sdfsd</span>
</div>
<div class="item">
<span>User Type</span>
<span>Sales Executive</span>
</div>
</div>
<div class="col">
<div class="item">
<span>Status</span>
<span>Active</span>
</div>
</div>
<div class="col edit-delete">
<div class="item">
Edit
Delete
</div>
</div>
</div>
</section>
<section class="accordion">
<input type="radio" name="collapse" id="handle2" />
<div class="handle">
<label for="handle2">
<div class="item">
<span>Name</span>
<span>Zyz</span>
</div>
<div class="item">
<span>Mobile Number</span>
<span>1234567890</span>
</div>
</label>
</div>
<div class="content">
<div class="col">
<div class="item">
<span>Name</span>
<span>xyz</span>
</div>
<div class="item">
<span>Mobile Number</span>
<span>1234567890</span>
</div>
</div>
<div class="col">
<div class="item">
<span>Name</span>
<span>xyz</span>
</div>
<div class="item">
<span>Mobile Number</span>
<span>1234567890</span>
</div>
</div>
<div class="col">
<div class="item">
<span>Mobile Number</span>
<span>1234567890</span>
</div>
</div>
<div class="col edit-delete">
<div class="item">
Edit
Delete
</div>
</div>
</div>
</section>
<section class="accordion">
<input type="radio" name="collapse" id="handle3" />
<div class="handle">
<label for="handle3">
<div class="item">
<span>Name</span>
<span>xyz</span>
</div>
<div class="item">
<span>Mobile Number</span>
<span>1234567890</span>
</div>
</label>
</div>
<div class="content">
<div class="col">
<div class="item">
<span>Name</span>
<span>xyz</span>
</div>
<div class="item">
<span>Mobile Number</span>
<span>1234567890</span>
</div>
</div>
<div class="col">
<div class="item">
<span>Name</span>
<span>xyz</span>
</div>
<div class="item">
<span>Mobile Number</span>
<span>12345625320</span>
</div>
</div>
<div class="col">
<div class="item">
<span>Mobile Number</span>
<span>1212121212</span>
</div>
</div>
<div class="col edit-delete">
<div class="item">
Edit
Delete
</div>
</div>
</div>
</section>
</body>
</html>
Please check on fullscreen view
please see screenshot below for inconsistency column width
This could be achieved 3 steps:
set display: contents on .handle, .handle > label, .content, .col elements. This will make all .item elements children of section.accordion
For all .item elements set width: 0 and flex-grow: 1 this will makes all columns to have the same width.
adjust padding on section.accordion to match your first design.
Of course those have to be done for the web view only.
I have this source code. It's supposed to switch between tabs after clicking on any of the buttons. Everything works fine but when I try to wrap buttons in div it stops working and it doesnt display content anymore.
.main {
margin: 0 auto;
min-width: 320px;
max-width: 800px;
}
.content {
background: #fff;
color: #373737;
}
.content>div {
display: none;
padding: 20px 25px 5px;
}
input {
display: none;
}
label {
display: inline-block;
padding: 15px 25px;
font-weight: 600;
text-align: center;
}
label:hover {
color: #fff;
cursor: pointer;
}
input:checked+label {
background: #ed5a6a;
color: #fff;
}
#tab1:checked~.content #content1,
#tab2:checked~.content #content2,
#tab3:checked~.content #content3,
#tab4:checked~.content #content4 {
display: block;
}
<div class="main">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">111</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">222</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">333</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">444</label>
<div class="content">
<div id="content1">
<p>
111
</p>
</div>
<div id="content2">
<p>
222
</p>
</div>
<div id="content3">
<p>
333
</p>
</div>
<div id="content4">
<p>
444
</p>
</div>
</div>
</div>
The code above is working, but I would like to wrap this part in div:
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">111</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">222</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">333</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">444</label>
The issue is that you are changing the document structure and this selector:
#tab1:checked ~ .content #content1,
#tab2:checked ~ .content #content2,
#tab3:checked ~ .content #content3,
#tab4:checked ~ .content #content4 {
display: block;
}
no longer matches the content areas. I can't think of a selector that would work because the addition of the new div breaks the sibling relationship between the tabs and the content.
However, you can add your div and make the code much simpler if you abandon the hidden radio buttons and the labels and just use a elements that target the content area that is supposed to be displayed. Then the CSS :target pseudo-class can be used to display the current content area that is the target of the clicked link.
Additionally, it's not clear why you have the actual content in a p that is inside of the div. That doesn't seem necessary.
<!doctype html>
<html lang="en">
<head>
<style>
.main {margin: 0 auto; min-width: 320px; max-width: 800px;}
.content {background: #fff; color: #373737;}
.content > div {display: none; padding: 20px 25px 5px;}
a {display: inline-block; padding: 15px 25px; font-weight: 600; text-align: center;}
a:hover {color: #fff; cursor: pointer;}
a:link {background: #ed5a6a; color: #fff; text-decoration:none; }
.content > :target
{
display: block;
}
</style>
</head>
<body>
<div class="main">
<div id="parent">
111
222
333
444
</div>
<div class="content">
<div id="content1">111</div>
<div id="content2">222</div>
<div id="content3">333</div>
<div id="content4">444</div>
</div>
</div>
</body>
</html>