We Keep Coding

On/Off Event on Same Button

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>

Trying to show text using JavaScript and HTML/ CSS

I am using a 'switcher' which currently has been styled and looks great.
What I would like is that when the switcher is swiped to the right then a DIV is printed on the page.
I can't find the error on the page...
Here's the CSS
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: "MONTHLY LIST";
padding-left: 10px;
background-color: #dfe4ea; color: #999999;
}
.onoffswitch-inner:after {
content: "BY COUNTRY";
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">
Hello World
</div>
The bit of the CSS that I believe 'hides' the CSS is here:
.triggeredDiv {
display: block;
}
.triggeredDiv.hidden {
display: none;
}
Can anyone see what it is that is wrong or missing?
This post was a previous precursor to this request for help.
By the way, the actual switcher generator is here: https://proto.io/freebies/onoff/

OK, I 'fixed' it by adding the JavaScript to the bottom of the page...I guess that is what was wrong - right?

Trying to reverse the JavaScript trigger of an HTML/ CSS switcher

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>

Only One Collapseable List Open at a Time

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>

Make div be on the same line as text, where to put display:inline-block?

The context :
Im using a on/off switch button, where i would like the help-text to be on the same line as the switch.
It look's like this right now:
I would like it to look like this:
I've googled that i can use this is my div-style:
display:inline-block;
My code :
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: #5B8CA8;
position: absolute;
left: 0;
bottom: 0;
height: 110px;
width: 100%;
overflow:hidden;
}
div.upp {
background-color: #5B8CA8;
position: absolute;
left: 0;
top: 0;
height: 39px;
width: 100%;
overflow:hidden;
}
.onoffswitch {
position: relative;
width: 55px;
-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: 23px;
padding: 0;
line-height: 23px;
font-size: 11px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "PÅ";
padding-left: 7px;
background-color: #5B8CA8;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "AV";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 15px;
margin: 4px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 28px;
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;
}
<p>
Help Text
</p>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitchT1" unchecked onclick="javascript:toggle1();">
<label class="onoffswitch-label" for="myonoffswitchT1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
My question :
Where should i put display:inline-block; in my div-style?

Both p and div should have inline-block style.
Of course, in real project I'd not put style attribute - use css classes instead.
<p style="display: inline-block">
Help Text
</p>
<div class="onoffswitch" style="display: inline-block">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitchT1" unchecked onclick="javascript:toggle1();">
<label class="onoffswitch-label" for="myonoffswitchT1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>

Use both display : inline-block; & vertical-align : middle; on both your p element and your .onoffswitch class. That should produce the desired effect!
A demo :
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
p {
display : inline-block;
vertical-align : middle;
}
footer {
background-color: #5B8CA8;
position: absolute;
left: 0;
bottom: 0;
height: 110px;
width: 100%;
overflow:hidden;
}
div.upp {
background-color: #5B8CA8;
position: absolute;
left: 0;
top: 0;
height: 39px;
width: 100%;
overflow:hidden;
}
.onoffswitch {
position: relative;
width: 55px;
display : inline-block;
vertical-align : middle;
-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: 23px;
padding: 0;
line-height: 23px;
font-size: 11px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "PÅ";
padding-left: 7px;
background-color: #5B8CA8;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "AV";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 15px;
margin: 4px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 28px;
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;
}
<p>
Help Text
</p>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitchT1" unchecked onclick="javascript:toggle1();">
<label class="onoffswitch-label" for="myonoffswitchT1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
Try this Fiddle.
Note :
It's a VERY BAD idea to set display : inline-block; & vertical-align : middle; for all p elements.
It's a MUCH, MUCH better idea to add a class to your p element, like this :
<p class="help">
Help Text
</p>
Now, you can set the styles for that element like this :
p.help {
display : inline-block;
vertical-align : middle;
}
This prevents these styles from being applies to all p elements!
See also this Fiddle.