How can i use accordion to show collections documents?

How can i use accordion to show collections documents? - javascript

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;
}

Related

aref links opening in new window

I am trying to create webpage with menus and each menu item is separate html page. While clicking the menu items they open up in the separate page(hiding the menu) which don't want as the user should be able to click on other menu they should open up in same page with menu item being displayed all time. I tried several thing but cant establish it.
Below is the html :
<DOCTYPE html>
<html>
<head>
<title>gurukul_admin</title>
<link rel="stylesheet" href="gurukul_admin.css">
<link rel="stylesheet" href="iframe.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<iframe width = "1120" class = "iframe" height = "900" style="float:right" name="admission"></iframe>
</head>
<body>
<div class="left-menu">
<div class="logo"><i class="fa fa-align-justify"></i>
<div>Pure CSS Accordion Nav</div>
</div>
<div class="accordion">
<div class="section">
<input type="radio" name="accordion-1" id="section-1" checked="checked"/>
<label for="section-1"><span>Dashboard</span></label>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-2" value="toggle"/>
<label for="section-2"><span>Admissions</span></label>
<div class="content">
<ul>
<li><i class="fa fa-inbox"></i><span>Application Decision</span></li>
<li><i class="fa fa-share"></i><span>Enrol/Reject</span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-3" value="toggle"/>
<label for="section-3"> <span>Enrolment</span></label>
<div class="content">
<ul>
<li><i class="fa fa-cog"></i><span>Section Allocation</span></li>
<li><i class="fa fa-group"></i><span>Change Section</span></li>
<li><i class="fa fa-sitemap"></i><span>Exam Allocation</span></li>
<li><i class="fa fa-sitemap"></i><span>Fee Allocation</span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-4" value="toggle"/>
<label for="section-4"> <span>Administration</span></label>
<div class="content">
<ul>
<li><i class="fa fa-coffee"></i><span><a target="_self" href="acadmgmt.html" >Academic Year</a></span></li>
<li><i class="fa fa-coffee"></i><span>Class Codes</span></li>
<li><i class="fa fa-coffee"></i><span>Section Codes</span></li>
<li><i class="fa fa-coffee"></i><span>Subject Codes</span></li>
<li><i class="fa fa-coffee"></i><span>Fee Category/Codes</span></li>
<li><i class="fa fa-coffee"></i><span>Assessment Codes</span></li>
<li><i class="fa fa-coffee"></i><span>System Users</span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-5" value="toggle"/>
<label for="section-5"> <span>Staff Management</span></label>
<div class="content">
<ul>
<li><i class="fa fa-coffee"></i><span>Add New Staff</span></li>
<li><i class="fa fa-coffee"></i><span>Class Codes</span></li>
</div>
</div>
</div>
</div>
</body>
</html>
Below is css
#import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
#import url(http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css);
.accordion {
color: #FFF;
width: 100%;
}
.accordion .section {
width: 100%;
}
.accordion .section input[type='radio'] {
display: none;
}
.accordion .section input[type='radio']:checked + label {
background: #363636;
}
.accordion .section input[type='radio']:checked + label:before {
content: " ";
position: absolute;
border-left: 3px solid #21CCFC;
height: 100%;
left: 0;
}
.accordion .section input[type='radio']:checked ~ .content {
max-height: 300px;
opacity: 1;
z-index: 10;
overflow-y: auto;
}
.accordion .section label {
position: relative;
cursor: pointer;
padding: 10px 20px;
display: table;
background: #222;
width: 100%;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.accordion .section label:before {
content: " ";
width: 100%;
position: absolute;
left: 0;
top: 0;
height: 1px;
border-top: 1px solid #363636;
}
.accordion .section label:hover {
background: #363636;
}
.accordion .section label span {
display: table-cell;
vertical-align: middle;
}
.accordion .section:last-of-type {
border-bottom: 1px solid #363636;
}
.accordion .section .content {
max-height: 0;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
transition: all 0.4s;
opacity: 0;
position: relative;
overflow-y: hidden;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #1ABC9C;
font-family: 'Quicksand', sans-serif;
}
.left-menu {
background: #222;
width: 210px;
position: absolute;
top: 0;
bottom: 0;
}
.accordion {
font-size: 14px;
}
.accordion .section .content {
padding: 0 15px;
}
.accordion .section input[type='radio'] {
display: none;
}
.accordion .section input[type='radio']:checked ~ .content {
padding: 15px;
}
ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}
ul li {
padding: 10px;
}
ul li i {
font-size: 13px;
width: 15px;
margin-right: 15px;
}
ul li:hover {
cursor: pointer;
}
ul li:hover i {
color: #21CCFC;
}
.logo {
padding: 30px 10px;
width: 200px;
text-align: center;
color: #FFF;
font-size: 20px;
}
.logo i {
font-size: 70px;
color: #21CCFC;
}
I tried with iframe but alignment changes on different screen size it looks horrible *
Iframe css
iframe {
margin-top: 0px;
margin-bottom: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 1px;
border-radius: 1px;
border: none;
background-color:#1ABC9C;
scrolling="no";
}
a:link, a:visited {
background-color: #363636;
color: white;
text-decoration: none;
}
a:hover, a:active {
background-color: #363636;
color: white;
text-decoration: none;
}

Not sure how familiar you with JQuery, but this might be helpful:
I would write a script, that would change the iframe src value to the corresponding url of the page on click.
In your case it would look something like this:
script.js
$("a").click(function(event, target){
event.preventDefault();
console.log(event.target);
$("#myiframe").attr("src", $(event.target).attr("href"));
});
Instead of a you can assign classes to the links in your menu, and put them in the code instead of "a".
In your index.html
<div>
<iframe src="anyurl.com" id="myiframe"></iframe>
</div>
It is important that you provide an id to your iframe to call it properly from the script.
Delete target attribute from your menu links, as they are not necessary anymore.

After lot of deliberation and hits and misses I eventually found out that I had to position my iframe under and position it accordingly

if has no child how to not toggle?

Hi I develop checkbox and I have some issue.if my li parents has no ul child it musn't be toggle. I'm talking about red arrows which is the left of li element.
I got solved problem thanks to #Arun P Johny just one more thing left I have to do is when clicked label checkbox musn't be checked only thoose which has got ul child
see my codeson codepen
html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>No Title</title>
</head>
<body>
<div class="new-checkbox">
<ul>
<li class="hasUl">
<input type="checkbox" id="input1">
<label for="input1">kategori <strong>(1)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input11">
<label for="input11">kategori<strong>(11)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input12">
<label for="input12">kategori <strong>(12)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input13">
<label for="input13">kategori <strong>(13)</strong>
</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="input2">
<label for="input2">kategori <strong>(2)</strong>
</label>
</li>
<li class="hasUl">
<input type="checkbox" id="input3">
<label for="input3">kategori <strong>(3)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input31">
<label for="input31">kategori <strong>(31)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input32">
<label for="input32">kategori <strong>(32)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input33">
<label for="input33">kategori <strong>(33)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input331">
<label for="input331">kategori <strong>(331)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input332">
<label for="input332">kategori <strong>(332)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input333">
<label for="input333">kategori <strong>(333)</strong>
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- new checkbox-->
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js" ></script>
</body>
</html>
css
.new-checkbox ul {
padding: 0;
margin: 0;
list-style: none;
margin-left: 30px;
font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
margin-left: 0;
}
.new-checkbox ul li {
margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding: 0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
.new-checkbox ul li:before {
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
li.downCheck:before
{
content: "\25bc" !important;
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
/*
.new-checkbox ul li:before {
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-16.png") no-repeat left center;
margin-top: 2px;
}
li.downCheck:before{
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-16.png") no-repeat left center !important;
margin-top: 2px;
}
*/
.new-checkbox li {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
 
.new-checkbox input[type="checkbox"][id]:checked ~ li::before {
content: "\25bc";
}
.new-checkbox li ul {
display: none;
}
.new-checkbox li.has-checked > ul {
display: block;
}
jquery codes
$(document).ready(function() {
$('.new-checkbox input[type=checkbox]').on("change", function() {
var checked = this.checked,
$li = $(this).parent();
$li.find('input[type=checkbox]').prop('checked', checked).parent().toggleClass('has-checked', checked);
$li.parentsUntil('.new-checkbox', 'li').each(function() {
var $checks = $(this).find('ul input[type=checkbox]');
$(this).children('input[type=checkbox]').prop('checked', !$checks.filter(':not(:checked)').length);
$(this).toggleClass('has-checked', $checks.is(':checked'));
});
});
$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) {
$(this).parent("li").stop().toggleClass("downCheck");
});
$(".new-checkbox ul li > * li:has(ul)").addClass("downCheck");
});

You can use the has-checked class to style the element, there is no need to have a new class
$(document).ready(function() {
$('.new-checkbox li:has(ul)').addClass('parent');
$('.new-checkbox input[type=checkbox]').on("change", function() {
var checked = this.checked,
$li = $(this).parent();
$li.find('input[type=checkbox]').prop('checked', checked).parent().toggleClass('has-checked', checked);
$li.parentsUntil('.new-checkbox', 'li').each(function() {
var $checks = $(this).find('ul input[type=checkbox]');
$(this).children('input[type=checkbox]').prop('checked', !$checks.filter(':not(:checked)').length);
$(this).toggleClass('has-checked', $checks.is(':checked'));
});
});
});
.new-checkbox ul {
padding: 0;
margin: 0;
list-style: none;
margin-left: 30px;
font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
margin-left: 0;
}
.new-checkbox ul li {
margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding: 0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
.new-checkbox ul li:before {
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
li.parent.has-checked:before {
content: "\25bc" !important;
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
/*
.new-checkbox ul li:before {
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-16.png") no-repeat left center;
margin-top: 2px;
}
li.downCheck:before{
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-16.png") no-repeat left center !important;
margin-top: 2px;
}
*/
.new-checkbox li {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.new-checkbox input[type="checkbox"][id]:checked ~ li::before {
content: "\25bc";
}
.new-checkbox li ul {
display: none;
}
.new-checkbox li.has-checked > ul {
display: block;
}
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js"></script>
<div class="new-checkbox">
<ul>
<li class="hasUl">
<input type="checkbox" id="input1">
<label for="input1">kategori <strong>(1)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input11">
<label for="input11">kategori<strong>(11)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input12">
<label for="input12">kategori <strong>(12)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input13">
<label for="input13">kategori <strong>(13)</strong>
</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="input2">
<label for="input2">kategori <strong>(2)</strong>
</label>
</li>
<li class="hasUl">
<input type="checkbox" id="input3">
<label for="input3">kategori <strong>(3)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input31">
<label for="input31">kategori <strong>(31)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input32">
<label for="input32">kategori <strong>(32)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input33">
<label for="input33">kategori <strong>(33)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input331">
<label for="input331">kategori <strong>(331)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input332">
<label for="input332">kategori <strong>(332)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input333">
<label for="input333">kategori <strong>(333)</strong>
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- new checkbox-->

Replace Code
$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) {
$(this).parent("li:has(ul)").stop().toggleClass("downCheck");
});
From
$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) {
$(this).parent("li").stop().toggleClass("downCheck");
});
Codepen Demo

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>

How to hide submenu when user clicks option, but still display when user hovers over menu

Currently my submenu displays on hover and hides when I click on a submenu item. This is great. Problem is, when I hover back over the top level menu it doesn't display the submenu after I click on a submenu item.
I would really like for the submenu to hide when the user clicks a submenu item, but I want it to display again if the user hovers over the top level menu again. Any ideas on how to fix this? Would really like a plain JS or css solution to this, no jquery please.
I did try to google this, but all I found were people trying to permanently hide a sub menu item that was clicked. I also read that innerHTML would remove all child elements so I moved my item text into buttons rather than the li elements and changed it to innerText instead of innerHTML.
function classSelect(profession) {
document.getElementById('dropDownSelections').style.display = 'none';
document.getElementById('classMenuHeader').innerText = profession;
}
function toggleMenu() {
document.getElementById('dropDownSelections').style.display = 'block';
}
.dropDownList {
z-index: 1000;
overflow: visible;
position: absolute;
}
.dropDownList ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
overflow: visible;
}
.dropDownList ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
overflow: visible;
}
.dropDownList ul li:hover {
background: #555;
color: #fff;
overflow: visible;
}
.dropDownList ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
overflow: visible;
text-align: center;
}
.dropDownList ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
overflow: visible;
margin: 0;
padding: 0;
}
.dropDownList ul li ul li:hover {
background: #666;
}
.dropDownList ul li:hover ul {
display: block;
}
.dropDownList a {
text-decoration: none;
display: block;
height: 3em;
padding-top: 1.5em;
}
.dropdownList input[type="button"] {
margin: 0;
padding: 0;
border: 0;
background: transparent;
font-family: inherit;
font-size: 1em;
cursor: pointer;
}
<div class="dropDownList">
<ul>
<li onmoustover="toggleMenu();">Select Class
<ul id="dropDownSelections">
<li onclick="classSelect('item1');">
<input type="button" value="item1" />
</li>
<li onclick="classSelect('item2');">
<input type="button" value="item2" />
</li>
<li onclick="classSelect('item3');">
<input type="button" value="item3" />
</li>
<li onclick="classSelect('item4');">
<input type="button" value="item4" />
</li>
<li onclick="classSelect('item5');">
<input type="button" value="item5" />
</li>
<li onclick="classSelect('item6');">
<input type="button" value="item6" />
</li>
<li onclick="classSelect('item7');">
<input type="button" value="item7" />
</li>
<li onclick="classSelect('item8');">
<input type="button" value="item8" />
</li>
</ul>
</li>
</ul>
</div>

Sorry I kinda butchered your js and html a bit, but this should work
HTML
<div class="dropDownList">
<ul id="classDropDownList">
<li>Select Class
<ul id="dropDownSelections">
<li onclick="classSelect('item1');">
<input type="button" value="item1" />
</li>
<li onclick="classSelect('item2');">
<input type="button" value="item2" />
</li>
<li onclick="classSelect('item3');">
<input type="button" value="item3" />
</li>
<li onclick="classSelect('item4');">
<input type="button" value="item4" />
</li>
<li onclick="classSelect('item5');">
<input type="button" value="item5" />
</li>
<li onclick="classSelect('item6');">
<input type="button" value="item6" />
</li>
<li onclick="classSelect('item7');">
<input type="button" value="item7" />
</li>
<li onclick="classSelect('item8');">
<input type="button" value="item8" />
</li>
</ul>
</li>
</ul>
</div>
Javascript
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('classDropDownList').onmouseover = function(){
document.getElementById('dropDownSelections').style.display = 'block';
}
document.getElementById('classDropDownList').onmouseout = function(){
document.getElementById('dropDownSelections').style.display = 'none';
}
});
function classSelect(profession) {
document.getElementById('dropDownSelections').style.display = 'none';
document.getElementById('classMenuHeader').innerText = profession;
}

Change Tabs style, when clicking previous or continue button

When I clicked on 'continue 1' button on the first page it will direct me to second tabs. But the tab 2 header doesn't change to dark color. How should I do that?
-Another question, when i clicked on the 'continue 1' button, it directs me to second tabs, but the second tabs alignment is off. Why is it like that?
Here is the FIDDLE example:
HTML
<div class="main-content">
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<label for="tab1">1<div class="train-stop-text" id="id1">1</div></label>
<div id="tab-content1" class="tab-content animated fadeIn">
1
<br>
<button type="button" class="btn" id="previous1">Previous 1</button>
<button type="button" class="btn" id="continue1">Continue 1</button>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">2<div class="train-stop-text" id="id2">2</div></label>
<div id="tab-content2" class="tab-content animated fadeIn">
2
<br>
<button type="button" class="btn" id="previous2">Previous 2</button>
<button type="button" class="btn" id="continue2">Continue 2</button>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">3<div class="train-stop-text" id="id3">3</div></label>
<div id="tab-content3" class="tab-content animated fadeIn">
3
<br>
<button type="button" class="btn" id="previous3">Previous 3</button>
<button type="button" class="btn" id="continue3">Continue 3</button>
</div>
</li>
</ul>
</div>
CSS
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 85%;
float: none;
list-style: none;
position: relative;
padding: 0;
/* margin: 75px auto; */
}
.tabs li{
float: left;
}
.tabs label {
/*display: block;*/
width:30px;
height:30px;
text-align:center;
padding:3px;
border-radius: 25px;
border:2px solid #d1d9e5;
color: #d1d9e5;
font-size: 14px;
font-weight: normal;
background: rgba(255,255,255,0.2);
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: rgba(255,255,255,0.5);
top: 0;
}
[id^=tab]:checked + label {
background: #fff;
color: #8a8f96;
border: 2px solid #8a8f96;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
padding-left: 250px;
}
.tab-content{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 20px;
line-height: 140%;
padding-top: 10px;
position: absolute;
top: 100px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
Javascript
$(document).ready(function () {
$("#continue1").click(function () {
$("#tab-content3").hide();
$("#tab-content2").show();
$("#tab-content1").hide();
});
});
Thank you!

The darker border is associated with the checked radio button([id^=tab]:checked + label {}) so mark the tab2 radio as checked
$(document).ready(function () {
$("#continue1").click(function () {
$("#tab-content3").hide();
$("#tab-content2").show();
$("#tab-content1").hide();
$('#tab2').prop('checked',true)
});
});
Demo: Fiddle

Have you thought about using a pre-existing solution for this functionality?
Examples:
http://sachinchoolur.github.io/lightslider/
http://codecanyon.net/item/lush-content-slider/3918728
http://cssslider.com/
Something along these lines could save you a lot of time.

You need to remove the checked attribute in tab1 too so your first tab does not highlight.
$(document).ready(function () {
$("#continue1").click(function () {
console.log("asdf");
$("#tab-content3").hide();
$("#tab-content2").show();
$("#tab1").removeAttr("checked");
$("#tab2").attr("checked",true);
$("#tab-content1").hide();
});
});

Develop Reference

JavaScript is the programming language of the Web.

How can i use accordion to show collections documents? - javascript

Related

aref links opening in new window

if has no child how to not toggle?

How to make a div into a checkbox

How to hide submenu when user clicks option, but still display when user hovers over menu

Change Tabs style, when clicking previous or continue button

Categories

Resources