I have a collapsable list below, and I want it so that there can only be one list open at a time. (There's a lot of extra CSS in there)
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
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: #ddd;
}
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: 0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 500px;
}
body {
font-family: sans-serif;
font-weight: normal;
margin: 10px;
color: #999;
}
form {
margin: 40px 0;
}
div {
clear: both;
margin: 0 50px;
}
label {
border-radius: 3px;
border: 1px solid #D1D3D4
}
/* hide input */
input.radio:empty {
margin-left: -999px;
}
/* style label */
input.radio:empty ~ label {
position: relative;
float: left;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'\2714';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'\2714';
text-indent: .9em;
color: #9CE2AE;
background-color: #4DCB6D;
}
input.radio:checked ~ label {
color: #777;
}
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: #ddd;
}
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: 0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 500px;
}
body {
font-family: sans-serif;
font-weight: normal;
margin: 10px;
color: #999;
}
form {
margin: 40px 0;
}
div {
clear: both;
margin: 0 50px;
}
label {
border-radius: 3px;
border: 1px solid #D1D3D4
}
/* hide input */
input.radio:empty {
margin-left: -999px;
}
/* style label */
input.radio:empty ~ label {
position: relative;
float: left;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'\2714';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'\2714';
text-indent: .9em;
color: #9CE2AE;
background-color: #4DCB6D;
}
input.radio:checked ~ label {
color: #777;
}
<button class="accordion">Foundation Bolting</button>
<div class="panel">
<div>
<input type="radio" name="radio" id="radio1-1" class="radio">
<label for="radio1-1">Foundation Bolts</label>
</div>
<div>
<input type="radio" name="radio" id="radio1-2" class="radio">
<label for="radio1-2">Foundation Plates</label>
</div>
</div>
<button class="accordion">Wall Bracing</button>
<div class="panel">
<div>
<input type="radio" name="radio2" id="radio2-1" class="radio">
<label for="radio2-1">Strong Tie Retrofit Connectors</label>
</div>
<div>
<input type="radio" name="radio2" id="radio2-2" class="radio">
<label for="radio2-2">Angled Iron Struts</label>
</div>
</div>
For example, if I click on Foundation Bolting, then click on Wall Bracing, Foundation Bolting will close. I've spent a lot of time searching this up, but all the other ones I find don't work because I don't have a list. How can I fix this?
(P.S. I don't want to add in a list because then I'll have random dots around that I don't want)
I have modified your code a little bit and added a function called closeAccordions.
It checks of the accordion is already open.
If it isn't, close the rest first, because we're now opening it.
If it is, just toggle the current one.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
if(!this.classList.contains("active")) {
closeAccordions();
}
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
function closeAccordions() {
for (i = 0; i < acc.length; i++) {
acc[i].classList.remove("active");
acc[i].nextElementSibling.classList.remove("show");
}
}
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: #ddd;
}
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: 0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 500px;
}
body {
font-family: sans-serif;
font-weight: normal;
margin: 10px;
color: #999;
}
form {
margin: 40px 0;
}
div {
clear: both;
margin: 0 50px;
}
label {
border-radius: 3px;
border: 1px solid #D1D3D4
}
/* hide input */
input.radio:empty {
margin-left: -999px;
}
/* style label */
input.radio:empty ~ label {
position: relative;
float: left;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'\2714';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'\2714';
text-indent: .9em;
color: #9CE2AE;
background-color: #4DCB6D;
}
input.radio:checked ~ label {
color: #777;
}
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: #ddd;
}
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: 0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 500px;
}
body {
font-family: sans-serif;
font-weight: normal;
margin: 10px;
color: #999;
}
form {
margin: 40px 0;
}
div {
clear: both;
margin: 0 50px;
}
label {
border-radius: 3px;
border: 1px solid #D1D3D4
}
/* hide input */
input.radio:empty {
margin-left: -999px;
}
/* style label */
input.radio:empty ~ label {
position: relative;
float: left;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'\2714';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'\2714';
text-indent: .9em;
color: #9CE2AE;
background-color: #4DCB6D;
}
input.radio:checked ~ label {
color: #777;
}
<button class="accordion">Foundation Bolting</button>
<div class="panel">
<div>
<input type="radio" name="radio" id="radio1-1" class="radio">
<label for="radio1-1">Foundation Bolts</label>
</div>
<div>
<input type="radio" name="radio" id="radio1-2" class="radio">
<label for="radio1-2">Foundation Plates</label>
</div>
</div>
<button class="accordion">Wall Bracing</button>
<div class="panel">
<div>
<input type="radio" name="radio2" id="radio2-1" class="radio">
<label for="radio2-1">Strong Tie Retrofit Connectors</label>
</div>
<div>
<input type="radio" name="radio2" id="radio2-2" class="radio">
<label for="radio2-2">Angled Iron Struts</label>
</div>
</div>
Related
I have a toggle button that works with CSS but I need to add some logic when it's on and when it's off. The problem is jQuery cannot read the :after and :before on CSS because they're not actually part of the DOM.
--TOGGLE--
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span id="switch-inner" class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
--CSS--
.onoffswitch {
position: relative; width: 78px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #C2C2C2; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 28px; padding: 0; line-height: 28px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #5C7FE3; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 5px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 46px;
border: 2px solid #C2C2C2; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
I tried the onClick event but everytime I click it (logically) it fires the code (multiple times if clicked multiple times), what would be perfect is that one would be true and fire the code and in the second click it would do something else.
I don't know if this could be super simple and my brain is tired and not thinking correctly, but any help would be helpful!!
Adding a click event handler is the right approach. Simply look at the checked property of the checkbox to know the state of the button (on/off).
document.getElementById("myonoffswitch").addEventListener("click", function(){
// Test the state of the checkbox and act accordingly
if(this.checked){
console.log("ON");
} else {
console.log("OFF");
}
});
.onoffswitch {
position: relative; width: 78px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #C2C2C2; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 28px; padding: 0; line-height: 28px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #5C7FE3; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 5px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 46px;
border: 2px solid #C2C2C2; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span id="switch-inner" class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
I have an HTML, CSS switcher which is working well.
However - I'd like the effect to be opposite so that there is NO text at all, but when the switcher is swiped then text (via a DIV) is trigger - so basically the opposite way around to how it currently is.
Any ideas how to do this? I have tried playing around with the 'hide' class but I can't get it to work...
Here's the code:
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
document.querySelector('.triggeredDiv').classList.remove('hidden');
} else {
document.querySelector('.triggeredDiv').classList.add('hidden');
}
}
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);
.onoffswitch {
position: relative;
width: 200px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 51px;
padding: 0;
line-height: 51px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "BY COUNTRY";
padding-left: 10px;
background-color: #dfe4ea;
color: #999999;
}
.onoffswitch-inner:after {
content: "SHOW TEXT";
padding-right: 10px;
background-color: #dfe4ea;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 50px;
margin: 0.5px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 145px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #999999;
}
.triggeredDiv {
display: block;
}
.triggeredDiv.hidden {
display: none;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="triggeredDiv">
Show Text
</div>
You need to reverse the logic and call the function initially.
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
document.querySelector('.triggeredDiv').classList.add('hidden');
} else {
document.querySelector('.triggeredDiv').classList.remove('hidden');
}
}
toggleDiv() // initial call. You may need to wait DOMContentLoaded
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
document.querySelector('.triggeredDiv').classList.add('hidden');
} else {
document.querySelector('.triggeredDiv').classList.remove('hidden');
}
}
toggleDiv()
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);
.onoffswitch {
position: relative;
width: 200px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 51px;
padding: 0;
line-height: 51px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "BY COUNTRY";
padding-left: 10px;
background-color: #dfe4ea;
color: #999999;
}
.onoffswitch-inner:after {
content: "SHOW TEXT";
padding-right: 10px;
background-color: #dfe4ea;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 50px;
margin: 0.5px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 145px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #999999;
}
.triggeredDiv {
display: block;
}
.triggeredDiv.hidden {
display: none;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="triggeredDiv">
Show Text
</div>
I changed the class name from hidden to shown and adjusted the JavaScript accordingly.
.triggeredDiv {
display: none;
}
.triggeredDiv.shown {
display: block;
}
Demo
function toggleDiv() {
var triggeredDiv = document.querySelector('.triggeredDiv');
if (document.getElementById('myonoffswitch').checked) {
triggeredDiv.classList.remove('shown');
} else {
triggeredDiv.classList.add('shown');
}
}
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);
.onoffswitch {
position: relative;
width: 200px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 51px;
padding: 0;
line-height: 51px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "BY COUNTRY";
padding-left: 10px;
background-color: #dfe4ea;
color: #999999;
}
.onoffswitch-inner:after {
content: "SHOW TEXT";
padding-right: 10px;
background-color: #dfe4ea;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 50px;
margin: 0.5px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 145px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #999999;
}
.triggeredDiv {
display: none;
}
.triggeredDiv.shown {
display: block;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="triggeredDiv">
Show Text
</div>
Using JQuery, hide text to begin with then show when on country.
$('.triggeredDiv').hide();
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
console.log("hidden")
$('.triggeredDiv').hide();
} else {
console.log("shown")
$('.triggeredDiv').show();
}
}
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);
.onoffswitch {
position: relative;
width: 200px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 51px;
padding: 0;
line-height: 51px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "BY COUNTRY";
padding-left: 10px;
background-color: #dfe4ea;
color: #999999;
}
.onoffswitch-inner:after {
content: "SHOW TEXT";
padding-right: 10px;
background-color: #dfe4ea;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 50px;
margin: 0.5px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 145px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #999999;
}
.triggeredDiv {
display: block;
}
.triggeredDiv .hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="triggeredDiv">
Show Text
</div>
I have radio buttons in an accordion, and depending on which radio buttons are selected, it will alert a different output. (There's a TON of extra CSS)
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
if(!this.classList.contains("active")) {
closeAccordions();
}
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
function closeAccordions() {
for (i = 0; i < acc.length; i++) {
acc[i].classList.remove("active");
acc[i].nextElementSibling.classList.remove("show");
}
}
var chanceoflive5 = 1;
var user;
function choose(choice){
user = choice;
}
function changechanceoflive2(){
if (user == 'bolts') {
chanceoflive5 = 1;
}
else if (user == 'plates') {
chanceoflive5 = 2;
}
}
var chanceoflive6 = 1;
var user2;
function choose2(choice2){
user = choice2;
}
function changechanceoflive3(){
if (user2 == 'tie') {
chanceoflive6 = 1;
}
else if (user2 == 'struts') {
chanceoflive6 = 2;
}
}
function nextpage(){
var chanceoflive7 = chanceoflive5 + chanceoflive6;
alert(chanceoflive7);
}
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: #ddd;
}
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: 0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 500px;
}
body {
font-family: sans-serif;
font-weight: normal;
margin: 10px;
color: #999;
}
form {
margin: 40px 0;
}
div {
clear: both;
margin: 0 50px;
}
label {
border-radius: 3px;
border: 1px solid #D1D3D4
}
/* hide input */
input.radio:empty {
margin-left: -999px;
}
/* style label */
input.radio:empty ~ label {
position: relative;
float: left;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'\2714';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'\2714';
text-indent: .9em;
color: #9CE2AE;
background-color: #4DCB6D;
}
input.radio:checked ~ label {
color: #777;
}
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: #ddd;
}
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: 0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 500px;
}
body {
font-family: sans-serif;
font-weight: normal;
margin: 10px;
color: #999;
}
form {
margin: 40px 0;
}
div {
clear: both;
margin: 0 50px;
}
label {
border-radius: 3px;
border: 1px solid #D1D3D4
}
/* hide input */
input.radio:empty {
margin-left: -999px;
}
/* style label */
input.radio:empty ~ label {
position: relative;
float: left;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'\2714';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'\2714';
text-indent: .9em;
color: #9CE2AE;
background-color: #4DCB6D;
}
input.radio:checked ~ label {
color: #777;
}
<hr>
<button class="accordion">Foundation Bolting</button>
<div class="panel">
<div>
<input type="radio" name="radio" id="radio1-1" class="radio" onclick="choose('bolts')" checked/>
<label for="radio1-1">Foundation Bolts</label>
</div>
<div>
<input type="radio" name="radio" id="radio1-2" class="radio" onclick="choose('plates')">
<label for="radio1-2">Foundation Plates</label>
</div>
</div>
<hr>
<button class="accordion">Wall Bracing</button>
<div class="panel">
<div>
<input type="radio" name="radio2" id="radio2-1" class="radio" onclick="choose2('tie')" checked/>
<label for="radio2-1">Strong Tie Retrofit Connectors</label>
</div>
<div>
<input type="radio" name="radio2" id="radio2-2" class="radio" onclick="choose2('struts')">
<label for="radio2-2">Angled Iron Struts</label>
</div>
</div>
<hr>
<form action="">
<div class="wrapper">
<button class="button" onClick="changechanceoflive2(); changechanceoflive3(); nextpage()" align=center>Submit</button>
</div>
</form>
When you click the bottom option for each list, it should alert 4, but instead, it alerts 3. Why?
i am trying to redirect to this page and go a specific part of the page, which is powered by java script to move around. i want to be able to go to say, delete section. but i cant achieve it using localhost/entry.php#delete . what am i doing wrong? below is the snippet.
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
var $tab = $(this),
href = $tab.attr('href');
$('.active').removeClass(ACTIVE_CLASS);
$tab.addClass(ACTIVE_CLASS);
$('.show')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$(href)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
});
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
height: 450px;
position: relative;
font-family: 'Roboto';
}
.red-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
position: relative;
font-family: 'Roboto';
padding: 15px;
}
label {
font-weight: bold;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid #tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
font-weight: bold;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
font-weight: bold;
}
:-ms-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
select {
margin: 10px;
border: 1px solid #111;
background: transparent;
width: 300px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
font-weight: bold;
color: #504848;
}
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
Insert
</li>
<li>
Update
</li>
<li>
Delete
</li>
</ul>
<div id="insert" class="form-action show">
<h1>Insert</h1>
<p>
insert data goes here
</p>
</div>
<div id="update" class="form-action hide">
<h1>Update</h1>
<p>
update data goes here
</p>
</div>
<div id="delete" class="form-action hide">
<h1>Delete</h1>
<p>
delete data goes here
</p>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>
Anchors apply just for simple navigation around the page, for changing tabs etc. you need to add some extra code, something like:
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
switchTab = function(href){
var $link = $('a[href=' + href + ']'),
$tab = $(href);
$('.active').removeClass(ACTIVE_CLASS);
$link.addClass(ACTIVE_CLASS);
$('.show')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$($tab)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
}
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
switchTab($(this).attr('href'));
});
if(window.location.hash){
switchTab(window.location.hash);
}
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
height: 450px;
position: relative;
font-family: 'Roboto';
}
.red-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
position: relative;
font-family: 'Roboto';
padding: 15px;
}
label {
font-weight: bold;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid #tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
font-weight: bold;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
font-weight: bold;
}
:-ms-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
select {
margin: 10px;
border: 1px solid #111;
background: transparent;
width: 300px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
font-weight: bold;
color: #504848;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
Insert
</li>
<li>
Update
</li>
<li>
Delete
</li>
</ul>
<div id="insert" class="form-action show">
<h1>Insert</h1>
<p>
insert data goes here
</p>
</div>
<div id="update" class="form-action hide">
<h1>Update</h1>
<p>
update data goes here
</p>
</div>
<div id="delete" class="form-action hide">
<h1>Delete</h1>
<p>
delete data goes here
</p>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>
I have tried fiddling with some HTML/JS/CSS
But got stuck on how to change the flipswich dynamically to a desired state.
CSS from here https://proto.io/freebies/onoff/
function on() {
document.getElementById("innerswitchid").className = document.getElementById("innerswitchid").className + "onoffswitch-inner:before";
}
function off() {
document.getElementById("innerswitchid").className = document.getElementById("innerswitchid").className + "onoffswitch-inner:after";
}
.onoffswitch {
position: relative;
width: 90px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 18px;
margin: 6px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 56px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
right: 0px;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span id="innerswitchid" class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<button onclick="on()">ON</button>
<button onclick="off()">OFF</button>
However that just crashes the flipswich. How can I change the flipswich dynamically to a desired state using js to change the css of the component?
Updating your code to the following:
HTML
<button id="js-btn--on">
ON
</button>
<button id="js-btn--off">
OFF
</button>
JS
document.getElementById("js-btn--on").onclick = on;
document.getElementById("js-btn--off").onclick = off;
function on() {
document.getElementById('myonoffswitch').checked = true;
}
function off() {
document.getElementById('myonoffswitch').checked = false;
}
You can toggle the checkbox and let the CSS do what it intends to accomplish rather than mixing JS and CSS.