Develop Reference

I made a menu button and a menu but I don't know how to link them together

hello I made a menu button and a menu but I don't know how to link them together when you click on the menu button the menu appears from the top to the center which starts with 0% opacity and gets to 100% opacity when you click on the menu button the menu closes and fades away I will appreciate if you can help me
Here is the code
var menu = document.getElementById("menu");
menu.onclick = function(){
menu.classList.toggle("openmenu");
}
body{
background-color: #333;
}
a{
text-decoration: none;
color: inherit
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu{
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
border-radius: 10px;
cursor: pointer;
}
.menu div{
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span{
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1{
transform: translate(-50%, -12.5px);
}
.menu .line-3{
transform: translate(-50%, 10px);
}
.openmenu .line-1{
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3{
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2{
width: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2{
background: #333;
width: 100%;
height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
}
nav{
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after{
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover{
color: #fff;
}
nav ul li:hover::after{
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>

basically what i did was gave container 2 an active class when click on menu.and defined container2.active in the css.
making it display block in the first place and flex when active
var menu = document.getElementById("menu");
const nav = document.getElementsByClassName("container2")[0];
menu.addEventListener("click", () => {
menu.classList.toggle("openmenu");
nav.classList.toggle("active");
})
body {
background-color: #333;
}
a {
text-decoration: none;
color: inherit
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu {
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6);
border-radius: 10px;
cursor: pointer;
}
.menu div {
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span {
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1 {
transform: translate(-50%, -12.5px);
}
.menu .line-3 {
transform: translate(-50%, 10px);
}
.openmenu .line-1 {
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3 {
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2 {
width: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2 {
background: #333;
width: 100%;
height: 100vh;
display: none;
align-items: flex-start;
justify-content: center;
}
.container2.active {
display: flex;
}
nav {
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after {
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6);
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover {
color: #fff;
}
nav ul li:hover::after {
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2 ">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>

How to connect two options and toggle switch buttons

I would like to connect two labels and toggle switches.
If you click the toggle switch, it is desired that the switch is activated when you click the respective labels. However, if you click on the same label, you do not want the switch to move.
I made a toggle switch along this link https://www.w3schools.com/howto. This button works very well. But I don't know what to do to achieve the effect I want.I tried putting two options in the label, but the layout is broken.
I can't use other frameworks such as jQuery. Pure JavaScript support is available.
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>

This would be simple to solve with JavaScript, but it's a more interesting question with pure CSS/HTML.
Explanation: pointer-events: none disables clicks from having any effect. pointer-events: all is used selectively on child elements to re-enable clicking on them, depending on the checked state of the input.
/* the interesting bit */
.label {
pointer-events: none;
display: flex;
align-items: center;
}
.switch,
.input:checked + .label .left,
.input:not(:checked) + .label .right {
pointer-events: all;
cursor: pointer;
}
/* most of the stuff below is the same as the W3Schools stuff,
but modified a bit to reflect changed HTML structure */
.input {
display: none;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .label .slider {
background-color: #2196f3;
}
input:focus + .label .slider {
box-shadow: 0 0 1px #2196f3;
}
input:checked + .label .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* styling to make it look like your screenshot */
.left, .right {
margin: 0 .5em;
font-weight: bold;
text-transform: uppercase;
font-family: sans-serif;
}
<input class="input" id="toggle" type="checkbox">
<label class="label" for="toggle">
<div class="left">
Option A
</div>
<div class="switch">
<span class="slider round"></span>
</div>
<div class="right">
Option B
</div>
</label>

This will help you perfectly using two radio button.
HTML :-
<div class="normal-container">
<div class="smile-rating-container">
<div class="smile-rating-toggle-container">
<form class="submit-rating">
<input id="meh" name="satisfaction" type="radio" />
<input id="fun" name="satisfaction" type="radio" />
<label for="meh" class="rating-label rating-label-meh">Bad</label>
<div class="smile-rating-toggle"></div>
<div class="toggle-rating-pill"></div>
<label for="fun" class="rating-label rating-label-fun">Fun</label>
</form>
</div>
</div>
</div>
CSS:-
.smile-rating-container {
position: relative;
height: 10%;
min-width: 220px;
max-width: 520px;
margin: auto;
font-family: 'Roboto', sans-serif;
top: 20%;
}
.submit-rating {
display: flex;
align-items: center;
justify-content: center;
}
.rating-label {
position: relative;
font-size: 1.6em;
text-align: center;
flex: 0.34;
z-index: 3;
font-weight: bold;
cursor: pointer;
color: grey;
transition: 500ms;
}
.rating-label:hover, .rating-label:active {
color: grey;
}
.rating-label-fun {
left: -58px;
text-align: right;
}
.rating-label-meh {
left: 58px;
text-align: left;
color: #222;
}
.smile-rating-container input {
display: none;
}
.toggle-rating-pill {
position: relative;
height: 65px;
width: 165px;
background: grey;
border-radius: 500px;
transition: all 500ms;
}
.smile-rating-toggle {
position: absolute;
width: 54px;
height: 54px;
background-color: white;
left: 182px;
border-radius: 500px;
transition: all 500ms;
z-index: 4;
}
/*
Toggle Changes
*/
#meh:checked~.rating-label-meh {
color: #2196f3;
}
#fun:checked~.rating-label-meh {
color: grey;
}
#fun:checked~.mouth {
border: 4px solid #2196f3;
border-bottom-color: rgba(1, 1, 1, 0);
border-right-color: rgba(1, 1, 1, 0);
border-left-color: rgba(1, 1, 1, 0);
top: 23px;
left: 291px;
transform: rotateX(180deg);
border-radius: 100%;
}
#fun:checked~.rating-label-fun {
color: #2196f3;
}
#fun:checked~.smile-rating-toggle {
left: 282px;
}
#fun:checked~.rating-eye-left {
left: 292px;
}
#fun:checked~.rating-eye-right {
left: 316px;
}
#fun:checked~.toggle-rating-pill {
background-color: #2196f3;
}
#fun:checked~.rating-eye {
background-color: #2196f3;
}

Trigger checkbox select

I want to make checkbox marked at the entrance to the site and changed accordingly as if it was clicked. How can I achieve this?
I tried to simulate the click () method but it didn't help.
So how can I do it?
HTML
#toggleShapeChangeInfo {
font-size: 30px;
top: 25%;
left: 20%;
transform: translate(-25%, -50%);
position: absolute;
pointer-events: none;
}
.lbl {
position: absolute;
display: block;
height: 5%;
width: 25%;
top: 20%;
left: 10%;
background: #898989;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s ease;
}
.lbl:after {
position: absolute;
left: -2px;
top: -3px;
display: block;
width: 50%;
height: 120%;
border-radius: 100px;
background: #fff;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
content: '';
transition: all 0.3s ease;
}
.lbl:active:after {
transform: scale(1.15, 0.85);
}
.cbx:checked~label {
background: #6fbeb5;
}
.cbx:checked~label:after {
left: 50%;
background: #179588;
}
.cbx:disabled~label {
background: #d5d5d5;
}
.cbx:disabled~label:after {
background: #bcbdbc;
}
.hidden {
display: none;
}
<div id='toggleShapeChange'>
<input type="checkbox" id="unchecked" class="cbx hidden" />
<label for="unchecked" class="lbl"></label>
<p id="toggleShapeChangeInfo">On</p>
</div>
I would be grateful for help.
It looks like your post is mostly code; please add some more details.

Adding checked attribute will fix your issue
<input type="checkbox" id="unchecked" class="cbx hidden" checked />
#toggleShapeChangeInfo {
font-size: 30px;
top: 25%;
left: 20%;
transform: translate(-25%, -50%);
position: absolute;
pointer-events: none;
}
.lbl {
position: absolute;
display: block;
height: 5%;
width: 25%;
top: 20%;
left: 10%;
background: #898989;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s ease;
}
.lbl:after {
position: absolute;
left: -2px;
top: -3px;
display: block;
width: 50%;
height: 120%;
border-radius: 100px;
background: #fff;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
content: '';
transition: all 0.3s ease;
}
.lbl:active:after {
transform: scale(1.15, 0.85);
}
.cbx:checked~label {
background: #6fbeb5;
}
.cbx:checked~label:after {
left: 50%;
background: #179588;
}
.cbx:disabled~label {
background: #d5d5d5;
}
.cbx:disabled~label:after {
background: #bcbdbc;
}
.hidden {
display: none;
}
.cbx ~ #toggleShapeChangeInfo:after {
content: 'Off'
}
.cbx:checked~#toggleShapeChangeInfo:after {
content: 'On'
}
<div id='toggleShapeChange'>
<input type="checkbox" id="unchecked" class="cbx hidden" checked />
<label for="unchecked" class="lbl"></label>
<p id="toggleShapeChangeInfo"></p>
</div>

How to make Toggle button JS keep working?

I am trying to use a toggle button to change a message, but unfortunately it is not working if you keep pressing.
That is my HTML code:
toggled = true;
togBtn.onclick = function() {
var text = "SELL"
if (!toggled) {
document.getElementById("test1").style.display = "none";
toggled = true;
}
if (toggled) {
document.getElementById("test1").innerHTML = text;
toggled = false;
}
};
#newsletter {
color: #ffffff;
background: #1d3030;
height: 60px;
}
#newsletter h1 {
float: left;
padding-left: 600px;
}
#newsletter form {
float: right;
}
.switch {
position: relative;
display: inline-block;
width: 115px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e8491d;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(80px);
-ms-transform: translateX(80px);
transform: translateX(80px);
}
.on {
display: none;
}
.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
}
input:checked+.slider .on {
display: block;
}
input:checked+.slider .off {
display: none;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<body>
<section id="newsletter">
<div class="container">
<h1 id="test1">BUY</h1>
<form method="post" action="">
<label class="switch">
<input type="checkbox" id="togBtn" class="togBtn">
<div class="slider round">
<span class="on" name="on" id="on">SELL</span>
<span class="off" name="off" id="off">BUY</span>
</div>
</label>
</form>
</div>
<div class="box">
</div>
</section>
</body>
I add the variable toggled to be used to change the name in HTML.
The button works for two clicks only, after that, it seen no work anymore.

This is so much simpler than you are making it. There's no need for two span elements and then toggling the display of each. Just use one span and update its text based on what the text currently is.
Also, your HTML isn't valid. You're using the label element incorrectly.
var btn = document.querySelector(".slider.round");
var output = document.querySelector(".onOff");
var test1 = document.getElementById("test1");
btn.addEventListener("click", function () {
var text = (output.textContent === "Buy") ? "Sell" : "Buy";
output.textContent = text;
test1.textContent = text;
});
#newsletter {
color: #ffffff;
background: #1d3030;
height: 60px;
}
#newsletter h1 {
float: left;
padding-left: 600px;
}
#newsletter form {
float: right;
}
.switch {
position: relative;
display: inline-block;
width: 115px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e8491d;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(80px);
-ms-transform: translateX(80px);
transform: translateX(80px);
}
.onOff {
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
}
input:checked + .slider .on {
display: block;
}
input:checked + .slider .off {
display: none;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<section id="newsletter">
<div class="container">
<h1 id="test1">BUY</h1>
<form method="post" action="">
<!-- You shouldn't use a label here -->
<div class="switch">
<input type="checkbox" id="togBtn" class="togBtn">
<div class="slider round">
<span class="onOff" name="onOff">Buy</span>
</div>
</div>
</form>
</div>
<div class="box"></div>
</section>

You're logic was a little off. You need to update the innerHTML if toggle is true or false. The element was disappearing because of this line: document.getElementById("test1").style.display="none";. On the first click it was true, so ran the code: document.getElementById("test1").innerHTML="BUY";. On the second click toggle equalled false, so ran document.getElementById("test1").style.display="none"; and got rid of the text.
Update your script to this, so that it updates the text value when toggle is true or false respectively:
let toggled = true;
togBtn.onclick = function(){
if(toggled){
document.getElementById("test1").innerHTML="SELL";
toggled = false;
} else {
document.getElementById("test1").innerHTML="BUY";
toggled = true;
}
};
#newsletter {
color: #ffffff;
background: #1d3030;
height: 60px;
}
#newsletter h1 {
float: left;
padding-left: 600px;
}
#newsletter form {
float: right;
}
.switch {
position: relative;
display: inline-block;
width: 115px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e8491d;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(80px);
-ms-transform: translateX(80px);
transform: translateX(80px);
}
.on {
display: none;
}
.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
}
input:checked+ .slider .on {
display: block;
}
input:checked + .slider .off {
display: none;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<body>
<section id="newsletter">
<div class="container">
<h1 id="test1">BUY</h1>
<form method="post" action="">
<label class="switch">
<input type="checkbox" id="togBtn" class="togBtn">
<div class="slider round">
<span class="on" name="on" id="on">SELL</span>
<span class="off" name="off" id="off">BUY</span>
</div>
</label>
</form>
</div>
<div class="box">
</div>
</section>
</body>

No need to write these if conditions. You can simply do it using ternary operator on click event and change the text like this
togBtn.onclick = function() {
var obj = document.getElementById("test1");
obj.innerHTML == "BUY"? (obj.innerHTML = "SELL"):(obj.innerHTML = "BUY");
};
#newsletter {
color: #ffffff;
background: #1d3030;
height: 60px;
}
#newsletter h1 {
float: left;
padding-left: 600px;
}
#newsletter form {
float: right;
}
.switch {
position: relative;
display: inline-block;
width: 115px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e8491d;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(80px);
-ms-transform: translateX(80px);
transform: translateX(80px);
}
.on {
display: none;
}
.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
}
input:checked+.slider .on {
display: block;
}
input:checked+.slider .off {
display: none;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<body>
<section id="newsletter">
<div class="container">
<h1 id="test1">BUY</h1>
<form method="post" action="">
<label class="switch">
<input type="checkbox" id="togBtn" class="togBtn">
<div class="slider round">
<span class="on" name="on" id="on">SELL</span>
<span class="off" name="off" id="off">BUY</span>
</div>
</label>
</form>
</div>
<div class="box">
</div>
</section>
</body>

change:
document.getElementById("test1").style.display="none";
to:
document.getElementById("test1").innerHTML="BUY";
Alternatively, if you don't want the header to change, just the button, you can remove all of the javascript, and the button will still work, and keep changing when you press it

Both events on focus, is JS needed?

I can't figure out how to get both of these effects (see code snippet below) on inputs using focus. I noticed that the focus works only for this element which is first in line. Can someone tell me why? And is it possible to get both effects on focus without using JavaScript?
form {
margin: 30px;
font-family: Arial;
}
.expand {
display: block;
position: relative;
margin-top: 20px;
width: 300px;
}
input[type="text"],
input[type="email"] {
border: none;
background-color: #eee;
padding: 10px;
width: 280px;
}
.border {
position: absolute;
display: block;
height: 3px;
width: 100%;
top: 100%;
background: red;
transform: scaleX(0);
transition: transform 0.5s;
transform-origin: 0 50%;
}
label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
color: #999;
pointer-events: none;
transition: 0.2s;
margin-left: 10px;
}
input[type="text"]:focus + .border,
input[type="email"]:focus + .border {
transform: scaleX(1);
}
input[type="text"]:focus + label,
input[type="email"]:focus + label {
top: -10px;
font-size: 12px;
color: red;
font-weight: bold;
margin: 0;
}
<form action="">
<div class="expand">
<input type="text" name="" id="">
<!-- border before label -->
<div class="border"></div>
<label for="">Here works border effect</label>
</div>
<div class="expand">
<input type="email" name="" id="">
<!-- border after label -->
<label for="">Here works label effect</label>
<div class="border"></div>
</div>
</form>

If using the + selector only the direct sibling will be affected, instead use ~
form {
margin: 30px;
font-family: Arial;
}
.expand {
display: block;
position: relative;
margin-top: 20px;
width: 300px;
}
input[type="text"],
input[type="email"],
textarea {
border: none;
background-color: #eee;
padding: 10px;
width: 280px;
}
textarea {
resize: none;
margin-bottom: -1px;
}
.border {
position: absolute;
display: block;
height: 3px;
width: 100%;
top: 100%;
background: red;
transform: scaleX(0);
transition: transform 0.5s;
transform-origin: 0 50%;
}
label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
color: #999;
pointer-events: none;
transition: 0.2s;
margin-left: 10px;
}
input[type="text"]:focus ~ .border,
input[type="email"]:focus ~ .border,
textarea:focus ~ .border {
transform: scaleX(1);
}
input[type="text"]:focus ~ label,
input[type="email"]:focus ~ label,
textarea:focus ~ label {
top: -10px;
font-size: 12px;
color: red;
font-weight: bold;
margin: 0;
}
<form action="">
<div class="expand">
<input type="text" name="" id="">
<!-- border before label -->
<div class="border"></div>
<label for="">Here works border effect</label>
</div>
<div class="expand">
<input type="email" name="" id="">
<!-- border after label -->
<label for="">Here works label effect</label>
<div class="border"></div>
</div>
</form>

Here the fiddle: https://jsfiddle.net/3nw7mkfe/1/
You can concatenate selector + like > or ~ or other.
<form action="">
<div class="expand">
<input type="email" name="" id="">
<!-- border after label -->
<label for="">Here works label effect</label>
<div class="border"></div>
</div>
</form>
form {
margin: 30px;
font-family: Arial;
}
.expand {
display: block;
position: relative;
margin-top: 20px;
width: 300px;
}
input[type="text"],
input[type="email"],
textarea {
border: none;
background-color: #eee;
padding: 10px;
width: 280px;
}
textarea {
resize: none;
margin-bottom: -1px;
}
.border {
position: absolute;
display: block;
height: 3px;
width: 100%;
top: 100%;
background: red;
transform: scaleX(0);
transition: transform 0.5s;
transform-origin: 0 50%;
}
label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
color: #999;
pointer-events: none;
transition: 0.2s;
margin-left: 10px;
}
input[type="text"]:focus + label + .border,
input[type="email"]:focus + label + .border,
textarea:focus + .border {
transform: scaleX(1);
}
input[type="text"]:focus + label,
input[type="email"]:focus + label,
textarea:focus + label {
top: -10px;
font-size: 12px;
color: red;
font-weight: bold;
margin: 0;
}

Your effective selectors are input:focus + .border and input:focus + label (with two types of inputs, but that does not matter for the working). The + selector only selects the adjacent sibling. If you want to make it work independent of the order of the label and border, you should use the general sibling selector ~. That would select any sibling after the selected element, not just the adjacent one.
Thus, your selectors will become input:focus ~ .border and input:focus ~ label. Hope that helps.
A good overview of selectors and combinators is given at MDN. There are some pretty powerful ones!

This will do it for what you need
form {
margin: 30px;
font-family: Arial;
}
.expand {
display: block;
position: relative;
margin-top: 20px;
width: 300px;
}
input[type="text"],
input[type="email"],
textarea {
border: none;
background-color: #eee;
padding: 10px;
width: 280px;
}
textarea {
resize: none;
margin-bottom: -1px;
}
.border {
position: absolute;
display: block;
height: 3px;
width: 100%;
top: 100%;
background: red;
transform: scaleX(0);
transition: transform 0.5s;
transform-origin: 0 50%;
}
label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
color: #999;
pointer-events: none;
transition: 0.2s;
margin-left: 10px;
}
input[type="text"]:focus + label + .border,
input[type="email"]:focus + label + .border,
textarea:focus + .border {
transform: scaleX(1);
}
input[type="text"]:focus + label,
input[type="email"]:focus + label,
textarea:focus + label {
top: -10px;
font-size: 12px;
color: red;
font-weight: bold;
margin: 0;
}
<form action="">
<div class="expand">
<input type="email" name="" id="">
<!-- border after label -->
<label for="">Here works label effect</label>
<div class="border"></div>
</div>
<div class="expand">
<input type="email" name="" id="">
<!-- border after label -->
<label for="">Here works label effect</label>
<div class="border"></div>
</div>
</form>
Check this it will work as you need