Develop Reference

Toggling among tabs using checkboxes

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>

How do I stop the button wiggle and center them in the div?

I have been trying to get this simple menu example going but I have two problems.
The buttons wiggle when hovered.
The image/text inside of the hover box is not centered.
Any help that you would be willing to provide is really appreciated. I am really trying to learn what I am doing wrong, so any explanation you can provide would be very awesome.
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<html>
<head>
<title>Cool Button Menu Example</title>
</head>
<style>
#coolButtonTopMenu .divButtons {
float: left;
padding: 3px;
margin: 2px;
border: 3px solid white;
height: 65px;
}
#coolButtonTtopMenu .divButtons img {
margin-top: -15px;
}
#coolButtonTopMenu .btnSmall {
padding: 3px;
float: left;
margin: auto;
margin: 2px;
}
#coolButtonTopMenu .btnSmallText {
font-family: "verdana" sans-serif serif;
font-size: x-small;
padding: 3px;
width: 45px;
text-align: center;
}
#coolButtonTopMenu .divButtons:hover {
/*border: 3px dotted #F59595;*/
padding: 3px;
margin: 2px;
/*background-color: #F59595;*/
height: 65px;
}
#coolButtonTopMenu .divButtons a {
text-decoration: none;
color: black;
display: block;
}
#coolButtonTopMenu .divButtons a:active {
border-top: 0px solid orange;
text-decoration: none;
}
#coolButtonTopMenu .mnuWorkQueueMain {
float: left;
}
#coolButtonTopMenu .mnuWorkQueueMain:hover {
border: 3px dotted #F59595;
}
</style>
<script>
// Functions to do work
function doSomething() {
alert('Button was clicked .....');
}
</script>
<!-- Menu Test -->
<div id='coolButtonTopMenu'>
<!-- Menu Item 1 -->
<div class="mnuWorkQueueMain">
<div id="mnuBtnSave" class="divButtons">
<a href="#" alt="Add" onclick='doSomething()'>
<img src="images/AddIcon.png" class="btnSmall" />
<p class="btnSmallText">New Request</p>
</a>
</div>
</div>
<!-- Menu Item 2 -->
<div class="mnuWorkQueueMain">
<div id="mnuBtnSave" class="divButtons">
<a href="#" alt="Add" onclick='doSomething()'>
<img src="images/AddIcon.png" class="btnSmall" />
<p class="btnSmallText">New Thing</p>
</a>
</div>
</div>
<!-- Menu Item 3 -->
<div class="mnuWorkQueueMain" ">
<div id="mnuBtnSave " class="divButtons ">
<a href="# " alt="Add " onclick='doSomething()'>
<img src="images/AddIcon.png " class="btnSmall " /><p class="btnSmallText ">Request More</p></a>
</div>
</div>
</div>
</html>

The problem that you are facing when hovering over the buttons is that a border takes up space and that border is applied when you hover, creating the "wiggle". To resolve this, you may consider moving away from a border and instead use an outline, which does not increase the size.
As far as centering the content goes, you need to be applying text-align: center; to the parent element for which you would like the child elements centered. In your case, you would apply this rule to #coolButtonTopMenu .divButtons.
// Functions to do work
function doSomething() {
alert('Button was clicked .....');
}
#coolButtonTopMenu .divButtons {
float: left;
padding: 3px;
margin: 2px;
border: 3px solid white;
height: 65px;
text-align: center;
}
#coolButtonTtopMenu .divButtons img {
/*margin-top: -15px;*/
}
#coolButtonTopMenu .btnSmall {
padding: 3px;
/*float: left;*/
margin: auto;
/*margin: 2px;*/
}
#coolButtonTopMenu .btnSmallText {
font-family: "verdana" sans-serif serif;
font-size: x-small;
/*padding: 3px;*/
width: 45px;
text-align: center;
}
#coolButtonTopMenu .divButtons:hover {
/*border: 3px dotted #F59595;*/
padding: 3px;
margin: 2px;
/*background-color: #F59595;*/
height: 65px;
}
#coolButtonTopMenu .divButtons a {
text-decoration: none;
color: black;
display: block;
}
#coolButtonTopMenu .divButtons a:active {
border-top: 0px solid orange;
text-decoration: none;
}
#coolButtonTopMenu .mnuWorkQueueMain {
float: left;
margin: 3px;
}
#coolButtonTopMenu .mnuWorkQueueMain:hover {
outline: 3px dotted #F59595;
}
<!-- Menu Test -->
<div id='coolButtonTopMenu'>
<!-- Menu Item 1 -->
<div class="mnuWorkQueueMain">
<div id="mnuBtnSave" class="divButtons" onclick='doSomething()'>
<img src="images/AddIcon.png" class="btnSmall" />
<p class="btnSmallText">New Request</p>
</div>
</div>
<!-- Menu Item 2 -->
<div class="mnuWorkQueueMain">
<div id="mnuBtnSave" class="divButtons">
<a href="#" alt="Add" onclick='doSomething()'>
<img src="images/AddIcon.png" class="btnSmall" />
</a>
<p class="btnSmallText">New Thing</p>
</div>
</div>
<!-- Menu Item 3 -->
<div class="mnuWorkQueueMain" ">
<div id="mnuBtnSave " class="divButtons ">
<a href="# " alt="Add " onclick='doSomething()'>
<img src="images/AddIcon.png " class="btnSmall " /><p class="btnSmallText ">Request More</p></a>
</div>
</div>
</div>

How can i use accordion to show collections documents?

My requirement:
1. Get the data from the mongo collection and display into accordion
2. Set the active ID of the selected html accordion tag same as that of the document from collection.
3. Get the dropdown transition when we click in any one accordion entry in UI.
sample.html
{{#each listjobs}}
<button class="accordion">{{platform}}</button>
<div class="panel">
<ul class="panel_elements">
<li><input type="submit" name="delete" value="Delete" /></li>
<li><input type="checkbox" name="abc" value="abc" />{{abc}}</li>
<li><input type="checkbox" name="def" value="def" />{{def}}</li>
<li><input type="checkbox" name="ghi" value="ghi" />{{ghi}}</li>
<li><input type="submit" name="trigger" value="Trigger" /></li>
<li id="status">SUCCESS / FAIL</li>
</ul>
</div>
{{/each}}
sample.css
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ccc;
border: 1px solid black;
}
button.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
ul.panel_elements{
list-style-type:none;
}
ul.panel_elements li{
display:inline-block;
}
sample.js
Template.trigger.events({
'click .accordion':function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
},
});
The list is displayed by fetching entry mongo collections, but when i click on the job in UI the accordion drop-down doesn't comes up!!.
Can anyone please help me to solve this? or is there any other way to do this?

I've reused what's already available here:
Template:
{{#each listjobs}}
<button class="accordion">{{platform}}</button>
<div class="panel">
<ul class="panel_elements">
<li><input type="submit" name="delete" value="Delete" /></li>
<li><input type="checkbox" name="abc" value="abc" />{{abc}}</li>
<li><input type="checkbox" name="def" value="def" />{{def}}</li>
<li><input type="checkbox" name="ghi" value="ghi" />{{ghi}}</li>
<li><input type="submit" name="trigger" value="Trigger" /></li>
<li id="status">SUCCESS / FAIL</li>
</ul>
{{/each}}
CSS:
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ccc;
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}

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>