We Keep Coding

How to make a toggle button with vanilla javascript and css without any html

I tried to find a solution and people always gave either solutions with html or jQuery or what have you.
So I made one and thought it might be helpful for others.

let defaultSetting = "off"
const toggleButton = document.createElement('toggleButton');
toggleButton.onclick = function(){toggleSwitchTransformFunction()};
document.body.appendChild(toggleButton);
const toggleSwitchCircle = document.createElement('toggleSwitchCircle');
toggleButton.appendChild(toggleSwitchCircle);
function toggleSwitchTransformFunction() {
if(defaultSetting == "off"){
defaultSetting = "on"
toggleSwitchCircle.style.transform = "translateX(100%)"
toggleButton.style.background = "black"
// execute code when ON
} else if(defaultSetting == "on"){
defaultSetting = "off"
toggleSwitchCircle.style.transform = "translateX(0%)"
toggleButton.style.background = "white"
// execute code when OFF
}
}
toggleButton{
width: 84px;
min-width: 84px;
display: block;
padding: 4px;
border: 1px black solid;
border-radius: 60px;
transition: 0.5s;
}
toggleSwitchCircle {
display: block;
width: 40px;
height: 40px;
border: 1px black solid;
background-color: white;
border-radius: 50%;
transition: 0.5s;
}

You can also easily do a pure CSS toggle by using an input and label.
https://codepen.io/seanstopnik/pen/f0d8ba0f9b0a317c324ee16f49ba945c
document.body.innerHTML = document.body.innerHTML +
"<div class=\"toggle\"><input id=\"toggle1\" class=\"toggle__checkbox\" type=\"checkbox\"><label for=\"toggle1\" class=\"toggle__label\"></label></div>";
/* For demo only */
body {
font-family: sans-serif;
background: #2d4a65;
padding: 60px;
}
/* Toggle */
.toggle {
position: relative;
width: 80px;
height: 40px;
border-radius: 20px;
box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
background-color: #1e3648;
overflow: hidden;
}
.toggle__checkbox {
position: absolute;
left: -9999px;
}
.toggle__label {
position: relative;
display: inline-block;
top: 4px;
left: 4px;
width: 32px;
height: 32px;
border-radius: 16px;
background-color: #fff;
transition: all 0.25s ease-in-out;
cursor: pointer;
}
.toggle__label:before, .toggle__label:after {
position: absolute;
top: 0;
color: #fff;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
line-height: 32px;
transition: all 0.15s ease-in-out;
}
.toggle__label:before {
left: -30px;
content: "on";
opacity: 0;
}
.toggle__label:after {
left: 37px;
content: "off";
opacity: 1;
}
.toggle__checkbox:checked ~ .toggle__label {
left: 44px;
}
.toggle__checkbox:checked ~ .toggle__label:before {
opacity: 1;
}
.toggle__checkbox:checked ~ .toggle__label:after {
opacity: 0;
}

How to prevent Dropdown options getting hidden from the other dropdown menu in css?

Below are the two images for dropdowns. I have several dropdowns in the same page at each and inside . On clicking the dropdown all its options get triggered but last options gets hindered under another select dropdown menu options. (Refernce: Image 2) How to prevent that?
The 3 options for the respective dropdown menu are: Profile, Word, Hashtag. The Hashtag options gets hindered . Check full code here: Codepen
Image 1
Image 2
I am trying this code:
$(".custom-select").each(function() {
var classes = $(this).attr("class"),
id = $(this).attr("id"),
name = $(this).attr("name");
var template = '<div class="' + classes + '">';
template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
template += '<div class="custom-options">';
$(this).find("option").each(function() {
template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
});
template += '</div></div>';
$(this).wrap('<div class="custom-select-wrapper"></div>');
$(this).hide();
$(this).after(template);
});
$(".custom-option:first-of-type").hover(function() {
$(this).parents(".custom-options").addClass("option-hover");
}, function() {
$(this).parents(".custom-options").removeClass("option-hover");
});
$(".custom-select-trigger").on("click", function() {
$('html').one('click',function() {
$(".custom-select").removeClass("opened");
});
$(this).parents(".custom-select").toggleClass("opened");
event.stopPropagation();
});
$(".custom-option").on("click", function() {
$(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
$(this).parents(".custom-options").find(".custom-option").removeClass("selection");
$(this).addClass("selection");
$(this).parents(".custom-select").removeClass("opened");
$(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
});
body {
background: #ededed;
font-family: 'Open Sans', sans-serif;
}
.center {
position: absolute;
display: inline-block;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
/** Custom Select **/
.custom-select-wrapper {
position: relative;
display: inline-block;
user-select: none;
}
.custom-select-wrapper select {
display: none;
}
.custom-select {
position: relative;
display: inline-block;
}
.custom-select-trigger {
position: relative;
display: block;
width: 230px;
padding: 0 84px 0 22px;
font-size: 20px;
font-weight: 300;
color: #fff;
line-height: 40px;
background: #265a88;
border-radius: 4px;
cursor: pointer;
}
.custom-select-trigger:after {
position: absolute;
display: block;
content: '';
width: 10px; height: 10px;
top: 50%; right: 25px;
margin-top: -3px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg) translateY(-50%);
transition: all .4s ease-in-out;
transform-origin: 50% 0;
}
.custom-select.opened .custom-select-trigger:after {
margin-top: 3px;
transform: rotate(-135deg) translateY(-50%);
}
.custom-options {
position: absolute;
display: block;
top: 100%; left: 0; right: 0;
min-width: 100%;
margin: 15px 0;
border: 1px solid #b5b5b5;
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0 2px 1px rgba(0,0,0,.07);
background: #fff;
transition: all .4s ease-in-out;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-15px);
}
.custom-select.opened .custom-options {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateY(0);
}
.custom-options:before {
position: absolute;
display: block;
content: '';
bottom: 100%; right: 25px;
width: 7px; height: 7px;
margin-bottom: -4px;
border-top: 1px solid #b5b5b5;
border-left: 1px solid #b5b5b5;
background: #fff;
transform: rotate(45deg);
transition: all .4s ease-in-out;
}
.option-hover:before {
background: #f9f9f9;
}
.custom-option {
position: relative;
display: block;
padding: 0 22px;
border-bottom: 1px solid #b5b5b5;
font-size: 18px;
font-weight: 600;
color: #b5b5b5;
line-height: 47px;
cursor: pointer;
transition: all .4s ease-in-out;
}
.custom-option:first-of-type {
border-radius: 4px 4px 0 0;
}
.custom-option:last-of-type {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
.custom-option:hover,
.custom-option.selection {
background: #f9f9f9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="sources" id="sources" class="custom-select sources" placeholder="Requirement Completed">
<option value="profile">Profile</option>
<option value="word">Word</option>
<option value="hashtag">Hashtag</option>
</select>

You can solve it in two way:
The first is set z-index in css like : .custom-options{z-index: 1;}
The second is set position like : .custom-options{position: relative;}
the first solution will make the curtain appear above another element, the second will leave the space by default to make it display correctly (even when the curtain is closed)

Expand/collapse transition for a span on button press

I'm switching from a collapsible object to another one since the latter has better features but, as a drawback, it seems harder to style.
I'd like to style the new transition animation as the old one.
Here you can see the code of the two buttons: demo and snippet
var coll = document.getElementsByClassName("oldcol");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
.oldcol {
cursor: help;
border: none;
outline: none;
background: none;
padding: 0;
font-size: 1em;
color: green;
border-bottom: 1px dashed;
transition: .3s;
}
.oldcon {
padding: 0 18px;
margin: 3px 0;
max-height: 0;
overflow: hidden;
transition: .3s ease-out;
background-color: #f1f1f1;
box-shadow: 5px 5px 10px 3px inset rgba(0,0,0,0.60);
}
.container {
position: relative;
margin: 0em;
}
.newcon {
display: none;
padding: 0.6em;
margin: 0.5em;
background: #f1f1f1;
box-shadow: 5px 5px 10px 3px inset rgba(0,0,0,0.60);
}
.newcol {
cursor: help;
border: none;
outline: none;
background: none;
padding: 0;
font-size: 1em;
color: green;
border-bottom: 1px dashed;
transition: .3s ease-out;
}
.newcol:focus {
pointer-events: none;
margin-bottom: 3em;
}
.newcol:focus + .newcon
{
display: block;
margin-top: -2.5em;
position: absolute;
left: 0;
right: 0;
}
.fadein {
animation: fadein 1s;
}
#keyframes fadein {
from {opacity:0}
to {opacity:1}
}
Old button: does <button class="oldcol">this</button> work?
<div class="oldcon"><p>Yes!<p/></div>
<hr>
<div class=container>
New button: does <button class="newcol">this</button><span class=newcon>Quite good</span> work?<br>
New button fadein: does <button class="newcol">this</button><span class="newcon fadein">Quite good</span> work?<br>
</div>
What I've tried so far
put transition: all 3s; in the newcon css (doesn't work)
added the following classes to span (and writing <span class="newcon visible hidden"> in the html)(doesn't work)
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.newcon.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
added the following class to span which let fade in the content, it works but I don't know how to do the same for the fade out effect. I think the problem is that to close the button it is not needed to click on it, but it is enough to click everywhere (this is not a good behaviour, how to fix it?).
.fadein {
animation: fadein 1s;
}
#keyframes fadein {
from {opacity:0}
to {opacity:1}
}
There are easy implementations
of the expand/collapse transition, such as the first answer to How can I transition height: 0; to height: auto; using CSS?, but I don't uderstand how to apply it in my case.

Here's a working version with the line-height transition that I proposed in the comments.
.container {
width: 250px;
}
.col {
cursor: help;
border: none;
outline: none;
background: none;
padding: 0;
font-size: 1em;
color: green;
border-bottom: 1px dashed;
}
.con {
display: block;
padding: 0 18px;
margin: 3px 0;
overflow: hidden;
transition: all .3s ease-out;
line-height: 0em;
background-color: #f1f1f1;
box-shadow: 5px 5px 10px 3px inset rgba(0,0,0,0.60);
}
.col:focus {
color: red;
}
.col:focus + .con
{
line-height: 1.2em;
padding: 8px 18px;
margin: 10px 0;
}
<div class="container">
This should work
<button class="col">right?</button>
<span class="con">Yes absolutely, but only with text!</span>
And it should also be responsive.
</div>

Fullpage.js - Dot Navigation Styling

I'm trying to style the dot navigation for Fullpage.JS however I'm having some trouble.
Here's a fiddle of my code and what i currently have:
https://jsfiddle.net/my9tqcho/
I'm trying to add the "fill up" effect, as seen HERE.
Here's the source code for the effect:
.dotstyle ul {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
cursor: default;
}
.dotstyle li {
position: relative;
display: block;
float: left;
margin: 0 16px;
width: 16px;
height: 16px;
cursor: pointer;
}
.dotstyle li a {
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: none;
border-radius: 50%;
background-color: #fff;
background-color: rgba(255,255,255,0.3);
text-indent: -999em;
cursor: pointer; /* make the text accessible to screen readers */
position: absolute;
}
/* Fill up */
.dotstyle-fillup li a {
overflow: hidden;
background-color: rgba(0,0,0,0);
box-shadow: inset 0 0 0 2px rgba(255,255,255,1);
transition: background 0.3s;
}
.dotstyle-fillup li a::after {
content: '';
position: absolute;
bottom: 0;
height: 0;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 0 1px #fff;
transition: height 0.3s;
}
.dotstyle-fillup li a:hover,
.dotstyle-fillup li a:focus {
background-color: rgba(0,0,0,0.2);
}
.dotstyle-fillup li.current a::after {
height: 100%;
}
So far I found THIS answer from the creator of fullpage.js, but I seem to miss something and I can't figure out what it is.

I made a fork of your jsfiddle and got it to work here https://jsfiddle.net/6z67g7v6/
What you want to do is to set overflow: hidden and box-shadow: inset 0 0 0 2px white so that it allows for such 'filled' effect.
The pseudo element styling is like the source code.
Cheers.

Toggle button for sidebar

I have a right sidebar.I'm using font awesome angle-left icon to show/hide the sidebar. On click of toggle button side bar pushes the content towards left along with the button & then button(font awesome left-angle) rotates 180 degrees to become (font awesome right-angle) as an animation. It is working fine till here. But when i scroll the page the toggle button is also getting scrolled vertically.
Here I don't want toggle button getting scrolled vertically every time.
I hv tried position: fixed in css by which vertical scrolling is stopped but the sidebar is not pushing the toggle button horizontally. The side bar is getting overlapped on the toggle button (only in firefox).
In chrome its working fine.The vertical scrolling is stopped & the sidebar is pushing the content to left side, but this is not happening in firefox.
css:
.container {
position: relative;
height: 100%;
width: 100%;
right: 0;
-webkit-transition: right 1s ease-in-out;
-moz-transition: right 1s ease-in-out;
-ms-transition: right 1s ease-in-out;
-o-transition: right 1s ease-in-out;
transition: right 1s ease-in-out;
}
.container.open-sidebar {
right: 240px;
}
#sidebar {
position: absolute;
right: -240px;
background-color: rgba(0, 0, 0, 0.3);
width: 240px;
height: 100%;
}
.content {
width: 100%;
height: 100%;
padding: 10px;
position: relative;
padding-left: 50px;
}
.content #sidebar-toggle {
background: transparent;
color: white;
opacity: 0.5;
border-radius: 1px;
display: block;
position: relative;
padding: 30px 7px;
float: right;
}
.padtop {
line-height: 600px;
color: white;
opacity: 0.5;
position: fixed;
}
.rotate {
-moz-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.rotate.side {
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
html:
<div class="container">
<div class="col-sm-1">
<a href="#" data-toggle=".container" id="sidebar-toggle">
<i class="fa fa-angle-double-left fa-5x padtop rotate"></i></a>
</div>
</div>
Here is my o/p:
o/p in Firefox
o/p in Chrome

description and example demo for toggle effect..
Demo
HTML
<div class="toggle-button">
<button></button>
</div>
CSS
.toggle-button { background-color: white; margin: 5px 0; border-radius: 20px; border: 2px solid #D0D0D0; height: 24px; cursor: pointer; width: 50px; position: relative; display: inline-block; user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; }
.toggle-button button { cursor: pointer; outline: 0; display:block; position: absolute; left: 0; top: 0; border-radius: 100%; width: 30px; height: 30px; background-color: white; float: left; margin: -3px 0 0 -3px; border: 2px solid #D0D0D0; transition: left 0.3s; }
.toggle-button-selected { background-color: #83B152; border: 2px solid #7DA652; }
.toggle-button-selected button { left: 26px; top: 0; margin: 0; border: none; width: 24px; height: 24px; box-shadow: 0 0 4px rgba(0,0,0,0.1); }
Javascript
$(document).on('click', '.toggle-button', function() {
$(this).toggleClass('toggle-button-selected');
});