Toggling among tabs using checkboxes - javascript

I have tabs section with 3 sections, Each tab has its own heading and content.
But I don't want to show all the 3 tabs, Just what the user select by checking the related checkbox, There are 3 related checkboxes, One for each tab.
Here is the code:
//Function to hide all siblings but leave the clicked one
function hideAllChildrenButOne(parentId, toRevealId) {
$('#' + parentId).children().css('display', 'none');
$('#' + toRevealId).css('display', 'block');
}
//Function to show the tab header and content when a checkbox is checked
function showSection(parentId, toRevealId) {
var relatedSection = $('#' + toRevealId).attr('data-section');
$('#' + toRevealId).toggleClass('inline-block');
$('#' + toRevealId).siblings().removeClass('tab_active');
$('#' + toRevealId).toggleClass('tab_active');
$('#' + relatedSection).toggleClass('active');
$('#' + relatedSection).siblings().removeClass('active');
$('#' + relatedSection).toggleClass('block');
if ($('input[data-header=' + toRevealId + ']').is(':checked')) {
}else{
}
}
$(document).ready(function() {
//On clicking a tab header('Father', 'Mother', 'Brother')
$('.tab-header').click(function(event) {
$(this).addClass('tab_active').siblings().removeClass('tab_active');
var related_section = $(this).attr('data-section');
hideAllChildrenButOne('relative_content', related_section);
});
//On changing any checkbox with name=relative[]
$("input[name='relative[]']").change(function() {
var self = $(this);
console.log(self.value);
showSection('relative_tabs', self.attr('data-header'));
});
});
.relative_container{
position: relative;
padding: 45px 15px 15px;
margin: 0 -15px 15px;
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
-webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
}
#media (min-width: 768px){
.relative_container {
margin-right: 0;
margin-left: 0;
background-color: #fff;
border-color: #ddd;
border-width: 1px;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
.relative_tabs{
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
list-style: none;
padding: 7px 0;
}
.relative_tabs:before{
display: table;
content: " ";
}
.tab-header{
display: none;
margin-bottom: -1px;
}
.tab-header>a{
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
padding: 9px 15px;
text-decoration: none;
cursor: pointer;
}
.tab-header.tab_active>a{
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.relative_content div{
display: none;
}
.relative_content>div.active{
display: block;
}
.tab-content{
display: none;
}
.hidden{
display: none;
}
.inline-block{
display: inline-block;
}
.block{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<label>Father<input type="checkbox" name="relative[]" value="Father" data-header="father-tab"></label>
<label>Mother<input type="checkbox" name="relative[]" value="Mother" data-header="mother-tab"></label>
<label>Guardian<input type="checkbox" name="relative[]" value="Guardian"></label>
<label>Other<input type="checkbox" name="relative[]" value="Other"></label>
<div class="relative_container">
<div class="relative_header">
<ul class="relative_tabs" id="relative_tabs">
<li id="father-tab" data-section="Father_info" class="tab-header">
<a>Father</a>
</li>
<li data-section="Mother_info" class="tab-header" id="mother-tab">
<a>Mother</a>
</li>
</ul>
</div>
<div class="relative_content" id="relative_content">
<div class="tab-content" id="Father_info">Father Info</div>
<div class="tab-content" id="Mother_info">Mother Info</div>
</div>
</div>
</form>
There is an issue:
When I check more than 1 checkbox the related tabs are shown but only the last checked one is active, But when I uncheck all of them except one the checked one is not active.
So if the user checked more than one checkbox and checked all except one, This one should become active.

I think couple of changes in html and javascript will help you to achieve desired result. In html, I am using almost similar id for tabs and contents (just diff is contents has '_info' suffix).
See the Snippet below:
$(document).ready(function() {
//On clicking a tab header('Father', 'Mother', 'Brother')
$('.tab-header').click(function(event) {
$(this).addClass('tab_active').siblings().removeClass('tab_active');
$('#relative_content').children().css('display', 'none');
$('#' + $(this).attr('id')+'_info').css('display', 'block');
});
//On changing any checkbox with name=relative[]
$("input[name='relative[]']").change(function() {
$('#' + $(this).data('header')).toggleClass('inline-block');
if($(this)[0].checked){
$('#' + $(this).data('header')).click();
}else{
$('#relative_content').children().css('display', 'none');
if($('.inline-block.tab_active').length == 0 && $('.tab-header.inline-block').length>0){
$($('.tab-header.inline-block')[0]).click();
}else{
$($('.inline-block.tab_active')[0]).click();
}
}
});
});
.relative_container{
position: relative;
padding: 45px 15px 15px;
margin: 0 -15px 15px;
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
-webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
}
#media (min-width: 768px){
.relative_container {
margin-right: 0;
margin-left: 0;
background-color: #fff;
border-color: #ddd;
border-width: 1px;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
.relative_tabs{
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
list-style: none;
padding: 7px 0;
}
.relative_tabs:before{
display: table;
content: " ";
}
.tab-header{
display: none;
margin-bottom: -1px;
}
.tab-header>a{
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
padding: 9px 15px;
text-decoration: none;
cursor: pointer;
}
.tab-header.tab_active>a{
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.relative_content div{
display: none;
}
.relative_content>div.active{
display: block;
}
.tab-content{
display: none;
}
.hidden{
display: none;
}
.inline-block{
display: inline-block;
}
.block{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<label>Father<input type="checkbox" name="relative[]" value="Father" data-header="father-tab"></label>
<label>Mother<input type="checkbox" name="relative[]" value="Mother" data-header="mother-tab"></label>
<label>Guardian<input type="checkbox" name="relative[]" value="Guardian" data-header="guardian-tab"></label>
<label>Other<input type="checkbox" name="relative[]" value="Other" data-header="other-tab"></label>
<div class="relative_container">
<div class="relative_header">
<ul class="relative_tabs" id="relative_tabs">
<li id="father-tab" data-section="Father_info" class="tab-header">
<a>Father</a>
</li>
<li data-section="Mother_info" class="tab-header" id="mother-tab">
<a>Mother</a>
</li>
<li data-section="Guardian_info" class="tab-header" id="guardian-tab">
<a>Guardian</a>
</li>
<li data-section="Other_info" class="tab-header" id="other-tab">
<a>Other</a>
</li>
</ul>
</div>
<div class="relative_content" id="relative_content">
<div class="tab-content" id="father-tab_info">Father Info</div>
<div class="tab-content" id="mother-tab_info">Mother Info</div>
<div class="tab-content" id="guardian-tab_info">Guardian Info</div>
<div class="tab-content" id="other-tab_info">Other Info</div>
</div>
</div>
</form>
You can test it here also.

Here is a very simplified example that might help. For some reason, the StackSnippet is not working, so I also made a jsFiddle of the same to demonstrate.
Note that I used the class "active" as both a marker (is it on/off?) and to add css. You can use a different name if you already are using "active" for something else.
jsFiddle Demo
$('[id^=cb]').click(function(){
var cb = this.id.split('_')[1];
if ( $('div#d_'+cb).hasClass('active') ){
$('div#d_'+cb).hide().removeClass('active');
}else{
$('div#d_'+cb).show().addClass('active');
}
});
div{display:inline-block;height:50px;width:50px;margin-right:10px;display:none;}
#d_1{background:yellow;}
#d_2{background:pink;}
#d_3{background:green;}
#d_4{background:orange;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="cb_1" type="checkbox" />
<input id="cb_2" type="checkbox" />
<input id="cb_3" type="checkbox" />
<input id="cb_4" type="checkbox" />
<section id="wrapper">
<div id="d_1"></div>
<div id="d_2"></div>
<div id="d_3"></div>
<div id="d_4"></div>
</section>

Related

Telling the user what to do in specific step of the form

I have a form in steps, The user should fill the required data in each step to be able to go to the next step and this is working fine.
But there is a step that some users don't know what to do in this step, There are 3 checkboxes the user should at least check one of them, Then enter the related data to go to the next step.
The user could choose all the 3 checkboxes, But he has to enter all the 3 related data, So whenever a checkbox is checked the related data should be filed to go to the next step.
I tried to provide the related code only, So it's not functional well, But it would show what I mean.
Here is a fiddle:
http://jsfiddle.net/gsfbpvye/1
Here is the code:
function hideAllChildrenButOne(parentId, toRevealId) {
$('#' + parentId).children().css('display', 'none');
$('#' + toRevealId).css('display', 'block');
}
function showSection(parentId, toRevealId, self) {
var relatedSection = $('#' + toRevealId).attr('data-section');
if(self.is(':checked')){
$('.relative_container').css('display', 'block');
$('#' + toRevealId).addClass('inline-block');
$('#' + toRevealId).addClass('tab_active');
$('#' + toRevealId).siblings().removeClass('tab_active');
$('#' + relatedSection).siblings().removeClass('active');
$('#' + relatedSection).addClass('block');
$('#' + relatedSection).addClass('active');
}
if ($('#'+self.attr('data-header')).hasClass('tab_active')){
var count = $(".tab-header:visible").length;
if(self.is(':checked') == false && count > 0){
$(".tab-header:visible:first").addClass('tab_active');
$('#'+$(".tab-header:visible:first").attr('data-section')).addClass('active');
}
}
if(self.is(':checked') == false){
$('#' + toRevealId).removeClass('inline-block');
$('#' + toRevealId).removeClass('tab_active');
$('#' + relatedSection).removeClass('block');
$('#' + relatedSection).removeClass('active');
if (!$(".tab-header:visible").length) {
$('.relative_container').css('display', 'none');
}
}
}
$(document).ready(function() {
$('.tab-header').click(function(event) {
$(this).addClass('tab_active').siblings().removeClass('tab_active');
var related_section = $(this).attr('data-section');
hideAllChildrenButOne('relative_content', related_section);
});
$("input[name='section[]']").change(function() {
var self = $(this);
showSection('relative_tabs', self.attr('data-header'), self);
if (!$('.tab_active').length) {
$("input[name='section[]']").click().click();
}
});
});
ul{
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0;
}
.hidden{
display: none;
}
.inline-block{
display: inline-block;
}
.block{
display: block;
}
.stepContainer {
display: block;
position: relative;
margin: 0;
padding: 0;
border: 0px solid #CCC;
/* overflow: hidden; */
clear: both;
/* height: 400px; */
}
.stepContainer div.content {
display: block;
position: relative;
float: left;
margin: 0;
padding: 5px;
border: 1px solid #CCC;
font: normal 13px Verdana, Arial, Helvetica, sans-serif;
color: #5A5655;
background-color: #F8F8F8;
/* height: 650px; */
text-align: left;
overflow: visible;
z-index: 88;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
width: 908px;
clear: both;
}
td {
width: 360px;
}
.checkbox-con{
text-align: center;
margin: 15px auto;
}
.checkbox-txt{
font: normal 13px Verdana, Arial, Helvetica, sans-serif;
color: #5A5655;
font-weight: bold;
margin-right: 5px;
margin-bottom: 10px
}
.checkbox-label{
font: normal 13px Verdana, Arial, Helvetica, sans-serif;
color: #5A5655;
margin-right: 5px;
cursor: pointer;
}
.checkbox-label input{
vertical-align: middle;
}
.relative_container{
display: none;
position: relative;
padding: 45px 15px 15px;
margin: 0 -15px 15px;
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
-webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
}
#media (min-width: 768px){
.relative_container {
margin-right: 0;
margin-left: 0;
background-color: #fff;
border-color: #ddd;
border-width: 1px;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
.relative_tabs{
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
list-style: none;
padding: 7px 0;
}
.relative_tabs:before{
display: table;
content: " ";
}
.tab-header{
display: none;
margin-bottom: -1px;
}
.tab-header>a{
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
padding: 9px 15px;
text-decoration: none;
cursor: pointer;
}
.tab-header.tab_active>a{
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.relative_content div{
display: none;
}
.txtBox {
border: 1px solid #CCCCCC;
color: #5A5655;
font: 13px Verdana, Arial, Helvetica, sans-serif;
padding: 2px;
width: 430px;
}
.txtBox:focus {
border: 1px solid #EA8511;
}
.dobBox{
border: 1px solid #CCCCCC;
color: #5A5655;
font: 13px Verdana, Arial, Helvetica, sans-serif;
padding: 2px;
width: 30%;
}
.txtArea{
width: 100%;
}
.relative_content>div.active{
display: block;
}
.tab-content{
display: none;
}
<script scr="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="step-1">
<div class="checkbox-con">
<div class="checkbox-txt">Please click at least one of the following ckeckboxes
and fill the related data: </div>
<label class="checkbox-label">First<input type="checkbox" name="section[]" value="First" data-header="first-tab"></label>
<label class="checkbox-label">Second<input type="checkbox" name="section[]" value="Second" data-header="second-tab"></label>
<label class="checkbox-label">Third<input type="checkbox" name="section[]" value="Third" data-header="third-tab"></label>
</div>
<div class="relative_container">
<div class="relative_header">
<ul class="relative_tabs" id="relative_tabs">
<li id="first-tab" data-section="First_info" class="tab-header">
<a>First</a>
</li>
<li data-section="Second_info" class="tab-header" id="second-tab">
<a>Second</a>
</li>
<li data-section="Third_info" class="tab-header" id="third-tab">
<a>Third</a>
</li>
</ul>
</div>
<div class="relative_content" id="relative_content">
<div class="tab-content" id="First_info">
<h2 class="StepTitle">First Sec</h2>
<table cellspacing="3" cellpadding="3" align="center">
<tbody>
<tr>
<td colspan="3" align="center"> </td>
</tr>
<tr>
<td align="right">Name :</td>
<td align="left"><input id="first_name" class="txtBox" name="first_name" type="text"/></td>
</tr>
</tbody>
</table>
</div>
<div class="tab-content" id="Second_info">
<h2 class="StepTitle">Second Sec</h2>
<table cellspacing="3" cellpadding="3" align="center">
<tbody>
<tr>
<td colspan="3" align="center"> </td>
</tr>
<tr>
<td align="right">Name :</td>
<td align="left"><input id="second_name" class="txtBox" name="second_name" type="text"/></td>
</tr>
</tbody>
</table>
</div>
<div class="tab-content" id="Third_info">
<h2 class="StepTitle">Third Sec</h2>
<table cellspacing="3" cellpadding="3" align="center">
<tbody>
<tr>
<td colspan="3" align="center"> </td>
</tr>
<tr>
<td align="right">Name :</td>
<td align="left"><input id="third_name" class="txtBox" name="third_name" type="text"/></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
So what text/hints/images/styling should I use to let the user know what to do?
UPDATE:
Here is the form, You will find the checkobxes in the 2nd step, The code is working there, So you could see how it's working now http://mdev.cloudaccess.host/admission2/admission.php
Design-wise, I'd consider just having three text fields, and if the user enters a string then it's implicitly "ticked", and if the user leaves it blank it's implicity "unticked".
function validate() {
const choiceA = $('input[name="a"]').val();
const choiceB = $('input[name="a"]').val();
const choiceC = $('input[name="a"]').val();
const isValid = choiceA.length || choiceB.length || choiceC.length;
$('button.submit').prop("disabled", !isValid);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div><input type='text' name='a' onkeypress='validate()' placeholder='Choice A (optional)' /></div>
<div><input type='text' name='b' onkeypress='validate()' placeholder='Choice B (optional)' /></div>
<div><input type='text' name='c' onkeypress='validate()' placeholder='Choice C (optional)' /></div>
<button class='submit'>Submit</button>
</form>

change dropdown button text on dropdown items selection

I am trying to develop drop down box list in HTML and CSS. I am trying to toggle drop-down box list on clicking on it. When I select some item, it is not coming in drop-down button.
Below is my code.
function toggleItems() {
$('.dropdown-menu').toggleClass('open');
}
function test() {
var element = document.getElementById("flat-example-2");
if ($(element).hasClass('on')) {
element.classList.remove("on");
} else {
element.classList.add("on");
}
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
min-width: 150px;
max-height: 600px;
overflow-x: visible;
overflow-y: visible;
padding: 0;
margin: 0;
list-style: none;
font-size: 13px;
font-weight: 500;
text-align: left;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-webkit-background-clip: padding-box;
background-clip: padding-box;
color: #464646;
transition: all .3s;
transform: translate(-100%);
}
.dropdown-menu.open {
transform: translate(0%);
}
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
toggle.btn-default {
background: #dedede;
background: rgba(0, 0, 0, 0.13);
border: 1px solid #2E92FA;
color: #464646;
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" onclick="toggleItems()">
<button style="width:151px;" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Filter by<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" style="width:100%;">
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox17">Sensors</label>
</div>
</li>
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox18">Actuators</label>
</div>
</li>
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox19">Digital inputs</label>
</div>
</li>
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox20">Outputs</label>
</div>
</li>
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox21">Converters</label>
</div>
</li>
</ul>
</div>
I am not able to select item from drop down. I want to select any item
from the drop down and that item should be selected in drop-down box
list. Can someone help me to make this work? Any help would be
appreciated. Thank you.
First remove the irrelevant code like data-toggle etc...You will need to attach a click event to the dropdown items to change the button text
Also there is no need of using div and label inside of li...so better to remove it
$(".btn-toggle").on("click", function() {
$('.dropdown-menu').toggleClass('open');
});
$(".dropdown-menu li").on("click", function() {
$('.btn-toggle').text($(this).text());
$('.dropdown-menu').removeClass('open');
});
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
min-width: 150px;
padding: 0;
margin: 0;
list-style: none;
font-size: 13px;
font-weight: 500;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
color: #464646;
transition: all .3s;
transform: translate(-100%);
}
.dropdown-menu.open {
transform: translate(0%);
}
.btn-group {
position: relative;
display: inline-block;
vertical-align: top;
}
.dropdown-menu li {
margin: 5px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<button class="btn-toggle" style="width:151px;" type="button">Filter by</button>
<ul class="dropdown-menu">
<li>Sensors</li>
<li>Actuators</li>
<li>Digital inputs</li>
<li>Outputs</li>
<li>Converters</li>
</ul>
</div>
You don't seem to have an event for when an item is selected from the list.
You'll need to attach a click event, preferably to the li element, and set the text of the dropdown there.
e.g.
$('.dropdown-menu li').click(function() {
var text = $(this).text(); // get text of the clicked item
$(".dropdown-toggle").text(text); // set text to the button (dropdown)
});
Full code:
function toggleItems() {
$('.dropdown-menu').toggleClass('open');
}
$('.dropdown-menu li').click(function() {
var text = $(this).text(); // get text of the clicked item
$(".dropdown-toggle").text(text); // set text text to the button (dropdown)
});
function test() {
var element = document.getElementById("flat-example-2");
if ($(element).hasClass('on')) {
element.classList.remove("on");
} else {
element.classList.add("on");
}
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
min-width: 150px;
max-height: 600px;
overflow-x: visible;
overflow-y: visible;
padding: 0;
margin: 0;
list-style: none;
font-size: 13px;
font-weight: 500;
text-align: left;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-webkit-background-clip: padding-box;
background-clip: padding-box;
color: #464646;
transition: all .3s;
transform: translate(-100%);
}
.dropdown-menu.open {
transform: translate(0%);
}
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
toggle.btn-default {
background: #dedede;
background: rgba(0, 0, 0, 0.13);
border: 1px solid #2E92FA;
color: #464646;
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" onclick="toggleItems()">
<button style="width:151px;" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Filter by<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" style="width:100%;">
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox17">Sensors</label>
</div>
</li>
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox18">Actuators</label>
</div>
</li>
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox19">Digital inputs</label>
</div>
</li>
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox20">Outputs</label>
</div>
</li>
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox21">Converters</label>
</div>
</li>
</ul>
</div>

Open a checkbox group on clicking a main custom checkbox

I have a css customized checkbox. When someone checks it, a checkbox group has to appear.
If you check the current code, I have made the main check box hidden. Once a user clicks on the box, it should reveal a gropu of checkbox that should be inside the box.
Main issue I am facing is that I am getting html calidation error when I place the checkbox group inside the box.
How do I make this happen?
.custom_chk input[type="checkbox"] {
display: none;
}
.custom_chk label {
border: 1px solid #e9f8fb;
padding: 16px;
display: block;
position: relative;
cursor: pointer;
-webkit-box-shadow: 1px 2px 3px -2px #999;
-moz-box-shadow: 1px 2px 3px -2px #999;
box-shadow: 1px 2px 3px -2px #999;
margin-top: 15px;
margin-bottom:10px;
background: #FDFDFD;
font-family: 'proxima_novaregular', Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-weight: normal;
}
.custom_chk label::before {
background-color: white;
border: 1px solid #ff6d6d;
color: white;
content: " ";
display: block;
height: 25px;
line-height: 28px;
position: absolute;
right: -2px;
text-align: center;
top: -2px;
transform: scale(0);
transition-duration: 0s;
width: 25px;
}
.custom_chk :checked+label {
outline: 2px solid #FF6D6D;
}
.custom_chk :checked+label:before {
content: "\2713";
background-color: #FF6D6D;
transform: scale(0.9);
}
<div class="form-group custom_chk">
<div class="col-lg-10 col-md-12 col-sm-12">
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-5">
<input type="checkbox" id="hyper_self" name="hyper_self" />
<label for="hyper_self">
<span class="ailment_icon hyper"></span>
<span class="ailment_text">main Item</span>
<span class="check_family">
<span class="check_family_item">
<input type="checkbox" class="custom-control-input" id="diab_gp">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">
<label for="diab_gp">Grand Parents</label></span>
</span>
</span>
</label>
</div>
</div>
</div>
</div>
custom_chk class should be given to the input checkbox.
These are the CSS changes you need to add
.custom_chk+label+.checkbox-group {
display:none;
}
.custom_chk:checked+label+.checkbox-group {
display:block;
}
You can find the working example in the plunker URL
http://plnkr.co/edit/D97DUvyzIvVU88Fy4YpD?p=preview

How to make a div into a checkbox

I recently started coding and I want to know the best way to make a box into a checkbox. So I want to make a website where the user can choose colors by checking the colored boxes to pick the ones they want. I have researched and can't find a good answer. All the boxes should be clickable, as the user can choose more than one color.
edit I'm sorry if I didn't make sense! What I'm trying to do is something like this: sv.tinypic.com/r/dcelb6/9. So the boxed are colored, and you can check them.
Here is my html:
<div>
<a href="#" class="color-box black-box" value="0">
<h3>Black</h3>
</a>
</div>
<div>
<a href="#" class="color-box grey-box" value="0">
<h3>Grey</h3>
</a>
</div>
<div>
<a href="#" class="color-box blue-box" value="0">
<h3>Blue</h3>
</a>
</div>
</div>
and here is the CSS:
.color-box {
width: 15.20833%;
min-width: 15.20833%;
height: 0;
padding-bottom: 15.20833%;
background-color: #fff;
margin-top: 0.72917%;
display: block;
float: left;
position: relative;
margin: 7px 0.72917%;
border: 1px solid transparent;
}
.color-box h3 {
color: #fff;
text-decoration: none;
}
.black-box {
background: #000;
}
.grey-box {
background: #9E9E9E;
}
.blue-box {
background: #205DB1;
}
where the user can choose colors by checking the colored boxes to pick
the ones they want.
snippet here
colors={'black-box':'black','grey-box':'grey','blue-box':'blue'}
var elements=document.getElementsByClassName('color-box')
function handler(el){
el[i].addEventListener('click',
function(e){
if(e.target.className.split(' ')[1] in colors){
document.getElementById('selector').style.background= colors[e.target.className.split(' ')[1]]
}
for(var i=0;i<elements.length;++i){
if(elements[i]!=e.target){elements[i].innerHTML=''}
}
e.target.innerHTML=='✓'?e.target.innerHTML='':e.target.innerHTML='✓';
},false)
}
for(var i=0;i<elements.length;++i){
handler(elements)
}
//document.getElementsByClassName('color-box').forEach(handler)
.color-box {
color:white;
font-size:20px;
width:30px;
height:30px;
background-color: #fff;
margin-top: 0.72917%;
display: block;
text-align:center;
position: relative;
border: 1px solid transparent;
}
.black-box {
background: #000;
}
.grey-box {
background: #9E9E9E;
}
.blue-box {
background: #205DB1;
}
#selector{
width:200px;
height:200px;
border:solid;
}
<div class="color-box black-box" >
</div>
<div class="color-box grey-box">
</div>
<div class="color-box blue-box">
</div>
</div>
<div id='selector'>
</div>
This is a basic example of how to implement it without JS https://plnkr.co/edit/tvamZjENZSLWnrtthDHP?p=preview
<style>
.checkbox > input[type="checkbox"] { display: none; }
.checkbox > input[type="checkbox"]:checked + label:before {margin-right: 10px; content: "[X]";}
.checkbox > input[type="checkbox"] + label:before {margin-right: 10px; content: "[ ]";}
</style>
<div class="checkbox">
<input type="checkbox" id="test">
<label for="test">HELLO</label>
</div>
Note that i'm using > to indicate the immediate checkbox element descendant of .checkbox element, and the + selector for getting the next LABEL element sibling of that input
This is a pure CSS one, using "hidden" radioset with their label colored
JS Fiddle
.radios{
display:none;
}
.color-box {
width: 50px;
line-height: 50px;
margin-top: 0.72917%;
display: inline-block;
margin: 7px 0.72917%;
color: #fff;
text-align:center;
text-decoration: none;
border: 1px solid transparent;
}
.black-box {
background: #000;
}
.grey-box {
background: #9E9E9E;
}
.blue-box {
background: #205DB1;
}
.radios:checked + label{
text-decoration:underline;
}
#rad1:checked ~ #result{
background-color:black;
}
#rad2:checked ~ #result{
background-color:#9E9E9E;
}
#rad3:checked ~ #result{
background-color:#205DB1;
}
#result{
width:200px;
height:200px;
border:2px orange solid;
}
<div>
<input type="radio" id="rad1" name="rad" class="radios">
<label for="rad1" class="color-box black-box">Black</label>
<input type="radio" id="rad2" name="rad" class="radios">
<label for="rad2" class="color-box grey-box">Grey</label>
<input type="radio" id="rad3" name="rad" class="radios">
<label for="rad3" class="color-box blue-box">Blue</label>
<hr>
<div id="result"></div>
</div>

Pressed button css

before I start, I found this topic : Pressed <button> CSS which give half of the answer I'm looking for.
I have a button in a link and I would like it to keep his style after it gets pressed. ALSO, I would like to see it back to his normal style (before it get pressed) when I click somewhere else on the page.
Here is my code :
jQuery('.btnpublish').click(function(){
jQuery(this).toggleClass('active');
});
.btnpublish{
background-color: #7f8c8d;
border: 1px solid #7f8c8d;
font-weight: bold;
}
.btnpublish:hover{
background-color: #3498db;
border: 1px solid #3498db;
}
.btnpublish:active{
background-color: #3498db;
border: 1px solid #3498db;
}
.btnpublish.active{
background-color: #3498db;
border: 1px solid #3498db;
}
<ul class="" role="tablist">
<li class="active listlayer6publish"><a class="btn btn-dark btnpublish" href="#vtab1" role="tab" data-toggle="tab"> Sports</a></li>
<li class="listlayer6publish"><a class="btn btn-dark " href="#vtab2" role="tab" data-toggle="tab"> Santé</a></li>
</ul>
For now, when I press on the button "Sports", it keeps the active style before I press again on the button. The only problem is that i want to change it when I press anywhere else on the page.
It's much easier to use hidden radio inputs with labels. I added and modified the jQuery, although you don't need it for the effects. See this POST
$(function() {
$('.btn').on('click', function(event) {
$(this).addClass('active');
$('.btn').not(this).removeClass('active');
});
});
.tablist input[type="radio"] {
display: none;
}
.tablist label {
display: inline-block;
background-color: #ddd;
color: grey;
padding: 3px 6px;
font-family: Arial;
font-size: 16px;
border: 1px inset grey;
border-radius: 6px;
cursor: pointer;
}
.tablist input[type="radio"]:checked + label {
background-color: transparent;
color: blue;
border: 1px inset blue;
}
fieldset {
width: -moz-fit-content;
width: -webkit-fit-content;
width: -fit-content;
border-radius: 6px;
}
.btn {
text-decoration: none;
/* When you integrate this code, change none to auto */
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="tablist">
<input type="radio" id="r1" name="rad" data-toggle="tab" checked>
<label for="r1" class="tag">
Sports
</label>
<input type="radio" id="r2" name="rad" data-toggle="tab">
<label for="r2" class="tag">
Sante
</label>
<input type="radio" id="r3" name="rad">
<label for="r3" class="tag">
Claus
</label>
</fieldset>
Try that:
jQuery(document).click(function () {
jQuery(".listlayer6publish").each(function () {
if (jQuery(this).hasClass("active"))
jQuery(this).removeClass("active");
});
You can use the below css to achieve the required functionality
.btnpublish:focus {
background-color: #3498db;
border: 1px solid #3498db;
}

Categories

Resources