I have successfully from examples created an CSS only tab functionality. The code works perfect on a pc screen, but on mobile the tabs go below each other and then they can't be pressed.
My CSS knowledge is limited to fix the problem. There is an "position: absolute;" div inside an "position: relative;" container.
If anyone can help change the code so the functionality can be affective on mobile also.
CSS for tab functionality.
.wietabs {
position: relative;
min-height: 600px;
clear: both;
margin: 25px 0;
}
.wietab {
float: left;
}
.wietab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
display: inline;
font-size: 14pt;
}
.wietab [type=radio] {
display: none;
}
.wietabcontent {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: auto;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
font-weight: bold;
}
[type=radio]:checked ~ label ~ .wietabcontent {
z-index: 1;
}
HTML for tab functionality
<div class="row-fluid">
<div style="min-height: 300px;" class="wietabs">
<div class="wietab">
<input type="radio" id="wietab-1" name="wietab-group-1" checked>
<label for="wietab-1">Tab1 Content</label>
<div class="wietabcontent">
<p>
Tab1
</p>
</div>
</div>
<div class="wietab">
<input type="radio" id="wietab-2" name="wietab-group-1">
<label for="wietab-2">Tab2 Content</label>
<div class="wietabcontent">
<p>
Tab2
</p>
</div>
</div>
<div class="wietab">
<input type="radio" id="wietab-3" name="wietab-group-1">
<label for="wietab-3">Tab3 Content Lang</label>
<div class="wietabcontent">
<p>
Tab3
</p>
</div>
</div>
</div>
</div>
JS Fiddle working example
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'm designing an application wherein i want to have tabs like below
But currently i'm seeing something like below (covered by box)
I searched the web for a similar design but i didn't find anything. Could you help to achieve the same?
Update
with border-bottom: 2px solid blue; i can get the blue line below, but the highlighted box is still appearing as shown below. I want to avoid that as well.
.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin: 45px 0 25px;
background: white;
color: #41C0ED;
font-weight:bold;
padding: 5px;
}
.tab {
float: left;
}
.tab label {
background: #fff;
padding: 10px;
border-bottom: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
top: -29px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: -1px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border-top: 1px solid #ccc;
-webkit-transition: opacity .6s linear;
opacity: 0;
}
[type=radio]:checked ~ label {
border-bottom: 2px solid #308AC2;
z-index: 2;
padding-bottom: 4px;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
opacity: 1;
}
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
</div>
</div>
</div>
You can use :
background-color: transparent !important;
can someone help me achieve that 2 ínputs look like one divided by a slash
Also doing it with twitter-bootstrap
Idea : http://postimg.org/image/pcgbzj4s1/
What I got so far but there is divided also I think they should overlap(slash with inputs)
<input class="form-control" type="text" name="kerkim" id="input_main">
<i id="slash">/</i>
<div class="input-group">
<input id="address" class="form-control" type="text" >
<div class="input-group-btn">
<button type="submit" class="btn btn-ẃarning"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
http://codepen.io/oroborus357/pen/doVKEP Here's the quick codepen I made for you, it shoud do what you need :)
<span class="first"><input type="text" /></span><input class="second" type="text" />
body {
padding: 50px;
background: #333;
}
* {
box-sizing: border-box;
}
input {
background: white;
border: none;
padding-left: 15px;
}
.first {
position: relative;
}
.first:before {
content: "/";
position: absolute;
left: 100%;
top: 0;
height: 100%;
transform: translateX(-50%);
font-size: 18px;
}
Many ways to it... here's two.
Given this html:
<div class="container">
<input type="text">
<span class="slash"></span>
<input type="text">
</div>
With this CSS:
.container{
border: 1px solid #999;
display: inline-block;
border-radius: 3px;
background: #fff;
margin-top: 50px;
position: relative;
}
.container input{
border: none;
background: none;
}
.slash{
transform: scale(3);
position: absolute;
}
/* or.... */
.slash{
width: 2px;
height: 28px;
background: #999;
transform: rotate(20deg);
position: relative;
display: inline-block;
position: absolute;
top: -5px;
}
A demo here
input[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
`.ds-drop-down` {
background: url('../../images/light-grey-disclosure-arrow-down.png')no-repeat scroll center center transparent;
padding: 10px 5px;
height: 0px;
width: 8px;
position: absolute;
top: 63px;
border: 1px solid blue;
}
.ds-btn {
height: 22px;
width: 20px;
padding: 4px;
top: 63px;
position: absolute;
border: 1px solid blue;
left: 579px;
}
#span-advanced-search {
border: 2px solid blue;
left: 20px;
width: 600px;
padding: 10px;
}
input[type=checkbox]:checked ~ div {
background: green;
display: block;
visibility: visible;
position: absolute;
width: 600px;
padding: 10px;
}
<label for="toggle-1" class="ds-drop-down" role="button" data-tooltip="Show search options"/>
<input type="checkbox" id="toggle-1"></input>
<div id="span-advanced-search">
<label>Education Level:</label> <input type="text"/><br></br>
<label>Type of Learning Material:</label> <input type="text"/><br></br>
<label>Difficulty Level:</label> <input type="text"/><br></br>
<label>Author:</label> <input type="text"/><br></br>
</div>
I want to show div-> 'span-advanced-search' by clicking on the checkbox->'toggle-1'. Initially the div will be hidden and when the checkbox is unchecked then also the div must be hidden.
I have shared my code snippet above,it's not working,when i am clicking on the checkbox the div is not showing.Please help me.
I'm not sure if this is what you are looking for, but hope it helps some way.
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="checkbox"){
$("#span-advanced-search").toggle();
}
});
});
#span-advanced-search{
padding: 20px;
display: none;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label><input type="checkbox" name="colorCheckbox" value="checkbox"></label>
</div>
<div id="span-advanced-search">
<label>Education Level:</label> <input type="text"/><br></br>
<label>Type of Learning Material:</label> <input type="text"/><br></br>
<label>Difficulty Level:</label> <input type="text"/><br></br>
<label>Author:</label> <input type="text"/><br></br>
</div>
I'm having a lot of problems trying to force a label tag to fill 100% of its parent's width, so that it can adjust depending on the user's window size.
For some reason, if I set the width to 100%, it just sets a seemingly-arbitrary width regardless (http://d.pr/i/uLDV).
I'm trying to change the width of these labels:
Here is the code that I'm working with.
HTML:
<div class="page-content">
<div class="lesson-title">Extend the properties of exponents to rational exponents - Lesson 1</div>
<div class="lesson-description"><span>Learning outcome for this lesson:</span> Explain how the definition of the meaning of rational exponents follows from extending the properties of integer exponents to those values, allowing for a notation for radicals in terms of rational exponents.</div>
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">What are rational exponents?</label>
<div class="content">ONE</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Solving for a fractional exponent</label>
<div class="content">
<iframe width="675" height="380" src="https://www.youtube.com/embed/6OFwfxmhtE8?modestbranding=1&iv_load_policy=3&rel=0&showinfo=0&theme=light&color=white&disablekb=1" frameborder="0"></iframe>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Example 1</label>
<div class="content">stuff</div>
</div>
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">Example 2</label>
<div class="content">stuff</div>
</div>
</div>
</div>
CSS:
.page-content {
width: 95%;
min-width: 875px;
margin: 25px auto;
}
.lesson-title {
padding: 15px;
font-size: 20px;
font-weight: 100;
color: #fff;
background: #2070A2;
}
.lesson-description {
padding: 15px;
font-size: 16px;
font-weight: 100;
line-height: 22px;
color: #333;
background: #FCFCFC;
}
.lesson-description span {
font-weight: 200;
}
.tabs {
position: relative;
min-height: 380px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
display: block;
margin-left: 675px;
font-size: 15px;
font-weight: 100;
background: #FCFCFC;
padding: 20px;
color: #333;
border-bottom: 1px solid #fff;
}
.tab[type=radio] {
display: none;
}
.content {
position: absolute;
top: 0;
left: 0;
background: black;
right: 0;
bottom: 0;
float: left;
width: 675px;
height: 380px;
margin-bottom: 30px
}
[type=radio]:checked ~ label {
background: #1897DC;
color: #FFF;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
Jsfiddle: http://jsfiddle.net/M8XYr/
Does anyone have any ideas on how to accomplish this?
Just change the .tab class:
.tab {
float: left;
width: 100%;
}