Jquery toggle class open and close problem - javascript

I'm trying to make open close menu for responsive size. I hide the menu with this code
left: -50%;
but when I try to open it with this code it doesn't work.
#left-side.active {
left: 60%;
}
Here is my jQuery toggle code:
function toggleLeftSideBar() {
document.getElementById('#left-side').classList.toggle('active');
}
This is my complete code:
$("#accordion h3").click(function() {
$(this).toggleClass('open');
$(this).parent().siblings().find('h3').removeClass('open');
$("#accordion ul ul").slideUp("fast");
if (!$(this).next().is(":visible")) {
$(this).next().slideDown("fast");
}
})
function toggleLeftSideBar() {
document.getElementById('#left-side').classList.toggle('active');
}
* {
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
height: 100%;
background-color: #f5f7f8;
}
h1 {
text-align: center;
padding: 0.6em 1em;
font-size: 1.4em;
background-color: #31363b;
display: inline-block;
width: 20%;
position: fixed;
}
h1>a {
text-decoration: none;
color: #202326;
;
transition: all 1s ease-in-out;
font-weight: 900;
}
h1:hover>a {
text-decoration: none;
color: #aaa;
;
}
#h1-span {
font-weight: bold;
display: inline;
}
/* Left Side */
#left-side {
height: 100%;
width: 20%;
background-color: #2a2f33;
position: fixed;
display: flex;
overflow-x: hidden;
top: 44px;
left: 0;
}
/*Logo section*/
.logo-ul {
width: 6%;
background-color: #2a2f33;
}
.logo-li {
padding: 0.5em;
}
.img-logo {
width: 40px;
height: 40px;
opacity: 0.4;
transition: all 1s ease;
}
.img-logo:hover {
opacity: 1;
}
.notification-span {
font-size: 10px !important;
border-radius: 5px;
border: 1px solid green;
margin-left: 8px;
padding: 1px 12px;
}
/*Accordion Menu*/
#accordion {
width: 100%;
background-color: #393d42;
color: #fff;
}
#accordion h3 {
text-transform: uppercase;
font-size: 11px;
line-height: 30px;
padding: 10px 10px;
cursor: pointer;
transition: all .2s linear;
}
#accordion h3:hover {
background-color: #f55661;
}
#accordion h3:hover i {
color: #fff;
}
/* links */
#accordion ul ul li a {
color: white;
display: block;
font-size: 11px;
line-height: 27px;
padding: 0 15px;
text-decoration: none;
transition: all .1s;
}
/* hover effect */
#accordion ul ul li a:hover {
color: #f55661;
}
/* hide non-actives by default */
#accordion ul ul {
display: none;
list-style-type: disc;
padding: 1.8em;
background: #32363a
}
#accordion ul ul:first-child {
background: #32363a;
}
/* #accordion li.active ul{
display:block;
}*/
/* Icon font styles */
#accordion h3 span {
font-size: 16px;
padding-right: 10px;
}
.left-icon i {
color: #f55661;
}
.open {
background-color: #f55661;
}
.open i {
color: white;
}
/* Right Side */
#right-side {
margin-left: 20%;
width: 75%;
padding: 10px;
}
.right-image {
display: flex;
justify-content: flex-end;
width: 100%;
}
.right-image img {
width: 3em;
height: 3em;
border-radius: 50%;
}
.rightside-ul {
display: flex;
margin: 1em;
}
.rightside-li {
margin: 1em;
font-size: .8em;
}
.rightside-li>a {
text-decoration: none;
}
/*Card Area*/
.card-area {
display: flex;
flex-wrap: wrap;
}
/*Card Component*/
.card {
padding: 1em;
}
h4 {
color: #959595;
font-size: 22px;
margin-left: 1em;
}
.right-icon i {
color: #fff;
}
.card-component {
display: flex;
padding: 1em;
}
.content-area {
padding: 1em;
background-color: #fff;
border-radius: 5px;
display: flex;
flex-direction: column;
align-content: center;
}
.statusbar {
min-width: 1.5em;
background-color: green;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
}
.content-nav {
display: flex;
}
.content-area p {
width: 300px;
text-align: left;
align-items: center;
margin-bottom: 1em;
}
.content-ul {
display: flex;
padding-bottom: 2em;
margin-left: 4em;
}
.content-ul li {
display: flex;
}
.content-ul li a {
text-decoration: none;
margin-right: 1em;
}
.img-container {
width: 300px;
height: 200px;
margin: 0 auto;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-footer-ul {
display: flex;
justify-content: space-around;
margin-top: 1em;
}
.card-footer-ul li a {
text-decoration: none;
}
.reaction-span {
color: #acacac;
}
/* RESPONSİVE */
#media screen and (max-width: 988px) {
body {
font-size: .8em;
}
#left-side {
min-width: 230px;
left: -50%;
/*This hides the menu to left*/
}
#right-size {
margin-left: 10%;
width: 70%;
padding: 6px;
}
h1 {
font-size: 1.2em;
min-width: 230px;
padding: 1em;
display: none;
}
#accordion h3 {
font-size: .7em;
}
#left-side.active {
left: 60%;
}
.leftsidebarButton {
position: absolute;
left: 5%;
top: 20px;
cursor: pointer;
}
.leftsidebarButton::before {
content: "\f0c9";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
font-size: 2.2em;
position: absolute;
padding: 5px;
}
}
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#100;200;300;400;500;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/eb6e3d525a.js" crossorigin="anonymous"></script>
<div id="wrap-page">
<h1><span id=h1-span>sociality</span>.io</h1>
<section id="left-side" onclick="toggleLeftSideBar()">
<div id="logo" class="active">
<ul class="logo-ul">
<li class="logo-li">
<img class="img-logo" src="images/instagramlogo.png" alt="instagram-logo">
</li>
<li class="logo-li">
<img class="img-logo" src="images/twitterlogo.png" alt="twitter-logo">
</li>
<li class="logo-li">
<img class="img-logo" src="images/pinterestlogo.png" alt="pinterest-logo">
</li>
<li class="logo-li">
<img class="img-logo" src="images/linkedinlogo.png" alt="linkedin-logo">
</li>
<li class="logo-li">
<img class="img-logo" src="images/youtubelogo.png" alt="youtube-logo">
</li>
<li class="logo-li">
<img class="img-logo" src="images/facebooklogo.png" alt="facebook-logo">
</li>
</ul>
</div>
<div id="accordion">
<ul>
<li class="active">
<h3><span class="left-icon icon-dashboard"><i class="far fa-bell"></i></span>Notifications<span class="notification-span">29</span></h3>
</li>
<li>
<h3 class="tooltip"><span class="left-icon icon-coffee"><i class="fab fa-slideshare"></i></span>Summary </h3>
<ul class>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="left-icon icon-cloud "><i class="fas fa-edit "></i></span>Publish</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="left-icon icon-cloud "><i class="far fa-comments "></i></span>Engage</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="left-icon icon-cloud "><i class="fas fa-volume-up "></i></span>Listen</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="left-icon icon-cloud "><i class="fas fa-chart-line "></i></span>Report</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="leftsidebarButton "></div>
</section>
<section id="right-side ">
<ul style="list-style: disc; " class="rightside-ul ">
<li style="color:#acacac " class="rightside-li ">
<span style="color:black ">Published</span>
</li>
<li style="color:#3ac183 " class="rightside-li ">
<span style="color:black ">Scheduled</span>
</li>
<li style="color:#f7bf38; white-space: nowrap; " class="rightside-li ">
<span style="color:black ">Need Approval</span>
</li>
<li style="color:#fb6450 " class="rightside-li ">
<span style="color:black ">Error</span>
</li>
<li style="color:#67b1f2 " class="rightside-li ">
<span style="color:black ">Notes</span>
</li>
<div class="right-image ">
<img src="images/fakefacegenerator.jpg " alt="profileimage ">
</div>
</ul>
<h4>14 January 2016</h4>
<!--Card Components -->
<div class="card-area ">
<div class="card ">
<div class="card-component ">
<div style="background-color: #3ac183; " class="statusbar ">
<span class="right-icon "> <i class="fab fa-facebook-f "></i> </span>
</div>
<div class="content-area ">
<div class="content-nav ">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul ">
<li> <span class="reaction-span "> <i class="fas fa-ban "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="far fa-trash-alt "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="fas fa-info-circle "></i> </span>
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container ">
<img src="images/icecream1.jpg " alt="icecream1 ">
</div>
<div class="card-footer-nav ">
<ul class="card-footer-ul ">
<li>
<span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-comment "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-eye "></i></span> 0
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card ">
<div class="card-component ">
<div style="background-color: #f7bf38; " class="statusbar ">
<span class="right-icon "> <i class="fab fa-twitter "></i> </span>
</div>
<div class="content-area ">
<div class="content-nav ">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul ">
<li> <span class="reaction-span "> <i class="fas fa-check "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="far fa-trash-alt "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="fas fa-info-circle "></i> </span>
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container ">
<img src="images/icecream2.jpg " alt="icecream1 ">
</div>
<div class="card-footer-nav ">
<ul class="card-footer-ul ">
<li>
<span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-retweet "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-eye "></i></span> 0
</li>
</ul>
</div>
</div>
</div>
</div>
<h4>12 January 2016</h4>
<!--Card Components -->
<div class="card-area ">
<div class="card ">
<div class="card-component ">
<div style="background-color: #acacac; " class="statusbar ">
<span class="right-icon "><i class="fab fa-facebook-f "></i> </span>
</div>
<div class="content-area ">
<div class="content-nav ">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul ">
<li> <span class="reaction-span "> <i class="far fa-trash-alt "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="fas fa-info-circle "></i> </span>
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container ">
<img src="images/dog1.jpg " alt="icecream1 ">
</div>
<div class="card-footer-nav ">
<ul class="card-footer-ul ">
<li>
<span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-comment "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-eye "></i></span> 0
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card ">
<div class="card-component ">
<div style="background-color: #acacac; " class="statusbar ">
<span class="right-icon "> <i class="fab fa-twitter "></i> </span>
</div>
<div class="content-area ">
<div class="content-nav ">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul ">
<li> <span class="reaction-span "> <i class="far fa-trash-alt "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="fas fa-info-circle "></i> </span>
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container ">
<img src="images/dog1.jpg " alt="icecream1 ">
</div>
<div class="card-footer-nav ">
<ul class="card-footer-ul ">
<li>
<span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-retweet "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-eye "></i></span> 0
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card ">
<div class="card-component ">
<div style="background-color: #acacac; " class="statusbar ">
<span class="right-icon "> <i class="fab fa-instagram "></i> </span>
</div>
<div class="content-area ">
<div class="content-nav ">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul ">
<li> <span class="reaction-span "> <i class="far fa-trash-alt "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="fas fa-info-circle "></i> </span>
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container ">
<img src="images/dog1.jpg " alt="icecream1 ">
</div>
<div class="card-footer-nav ">
<ul class="card-footer-ul ">
<li>
<span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-comment "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-eye "></i></span> 0
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js " integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin=" anonymous "></script>


I Will Provide an easier method u can follow to hide and show sidebar
$('.toggle').click(function() {
$('.sidebar').toggleClass('active');
});
* {
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
overflow-x: hidden;
margin: 0;
padding: 0;
}
.d-flex {
display: flex;
height: 100%;
}
.sidebar {
width: 300px;
background-color: blueviolet;
transition: width 500ms ease-out;
}
.main {
width: 100%;
background-color: cyan;
}
.sidebar.active {
width: 0;
}
<script src="https://code.jquery.com/jquery-3.6.0.js " integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin=" anonymous "></script>
<div class="d-flex">
<div class="sidebar">f</div>
<div class="main">
<a class="toggle" href="javascript:void(0)">toggle</a>
</div>
</div>

Related

How to Add Space Between Product Card HTML

I am having a serious problem when creating a HTML and CSS product card page. I managed to create one product card page successfully as below:
However, when I wanted to add more product card next to it, it shows some problem where all the product cards are join together as below:
How shall I make my product card to to work by having 3 in a rows with some spaced between each of it? below is my HTML and CSS code. Thank you and your help really appreciated.
let circle = document.querySelector(".color-option");
circle.addEventListener("click", (e)=>{
let target = e.target;
if(target.classList.contains("circle")){
circle.querySelector(".active").classList.remove("active");
target.classList.add("active");
document.querySelector(".main-images .active").classList.remove("active");
document.querySelector(`.main-images .${target.id}`).classList.add("active");
}
});
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600&display=swap');
*{
margin: auto;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(135deg, #43CBFF 10%, #9708CC 100%);
}
.product-card {
position: relative;
max-width: 355px;
width: 100%;
border-radius: 25px;
padding: 20px 30px 30px 30px;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
z-index: 3;
overflow: hidden;
}
.product-card .logo-cart{
display: flex;
align-items: center;
justify-content: space-between;
}
.product-card .logo-cart img{
height: 60px;
width: 60px;
object-fit: cover;
}
.product-card .logo-cart i{
font-size: 27px;
color: #707070;
cursor: pointer;
transition: color 0.3s ease;
}
.product-card .logo-cart i:hover{
color: #333;
}
.product-card .main-images{
position: relative;
height: 210px;
}
.product-card .main-images img{
position: absolute;
height: 300px;
width: 300px;
object-fit: cover;
transform: rotate(18deg);
left: 12px;
top: -40px;
z-index: -1;
opacity: 0;
transition: opacity 0.5s ease;
}
.product-card .main-images img.active{
opacity: 1;
}
.product-card .shoe-details .shoe_name{
font-size: 24px;
font-weight: 500;
color: #161616;
}
.product-card .shoe-details p{
font-size: 12px;
font-weight: 400;
color: #333;
text-align: justify;
}
.product-card .shoe-details .stars i{
margin: 0 -1px;
color: #333;
}
.product-card .color-price .color-option{
display: flex;
align-items: center;
}
.color-price{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.color-price .color-option .color{
font-size: 18px;
font-weight: 500;
color: #333;
margin-right: 8px;
}
.color-option .circles{
display: flex;
}
.color-option .circles .circle{
height: 18px;
width: 18px;
background: #0071C7;
border-radius: 50%;
margin: 0 4px;
cursor: pointer;
transition: all 0.4s ease;
}
.color-option .circles .circle.blue.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #0071C7;
}
.color-option .circles .circle.pink{
background: #FA1795;
}
.color-option .circles .circle.pink.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #FA1795;
}
.color-option .circles .circle.yellow{
background: #F5DA00;
}
.color-option .circles .circle.yellow.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #F5DA00;
}
.color-price .price{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.color-price .price .price_num{
font-size: 25px;
font-weight: 600;
color: #707070;
}
.color-price .price .price_letter{
font-size: 10px;
font-weight: 600;
margin-top: -4px;
color: #707070;
}
.product-card .button{
position: relative;
height: 50px;
width: 100%;
border-radius: 25px;
margin-top: 30px;
overflow: hidden;
}
.product-card .button .button-layer{
position: absolute;
height: 100%;
width: 300%;
left: -100%;
background-image: linear-gradient(135deg,#9708CC, #43CBFF,#9708CC, #43CBFF );
transition: all 0.4s ease;
border-radius: 25PX;
}
.product-card .button:hover .button-layer{
left: 0;
}
.product-card .button button{
position: relative;
height: 100%;
width: 100%;
background: none;
outline: none;
border: none;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
color: #fff;
}
</style>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<div class="product-card">
<div class="logo-cart">
<!--<img src="images/logo.png" alt="logo">-->
<i class='bx bx-shopping-bag'></i>
</div>
<div class="main-images">
<!--<img id="blue" class="blue active" src="images/blue.png" alt="blue">-->
<!--<img id="pink" class="pink" src="images/pink.png" alt="blue">-->
<!--<img id="yellow" class="yellow" src="images/yellow.png" alt="blue">-->
</div>
<div class="shoe-details">
<span class="shoe_name">ADDIDAS GAZE ZX</span>
<p>Lorem ipsum dolor sit lorenm i amet, consectetur adipisicing elit. Eum, ea, ducimus!</p>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bx-star' ></i>
</div>
</div>
<div class="color-price">
<div class="color-option">
<span class="color">Colour:</span>
<div class="circles">
<span class="circle blue active" id="blue"></span>
<span class="circle pink " id="pink"></span>
<span class="circle yellow " id="yellow"></span>
</div>
</div>
<div class="price">
<span class="price_num">$09.00</span>
<span class="price_letter">Nine dollar only</span>
</div>
</div>
<div class="button">
<div class="button-layer"></div>
<button>Add To Cart</button>
</div>
</div>
<div class="product-card">
<div class="logo-cart">
<!--<img src="images/logo.png" alt="logo">-->
<i class='bx bx-shopping-bag'></i>
</div>
<div class="main-images">
<!--<img id="blue" class="blue active" src="images/blue.png" alt="blue">-->
<!--<img id="pink" class="pink" src="images/pink.png" alt="blue">-->
<!--<img id="yellow" class="yellow" src="images/yellow.png" alt="blue">-->
</div>
<div class="shoe-details">
<span class="shoe_name">ADDIDAS GAZE ZX</span>
<p>Lorem ipsum dolor sit lorenm i amet, consectetur adipisicing elit. Eum, ea, ducimus!</p>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bx-star' ></i>
</div>
</div>
<div class="color-price">
<div class="color-option">
<span class="color">Colour:</span>
<div class="circles">
<span class="circle blue active" id="blue"></span>
<span class="circle pink " id="pink"></span>
<span class="circle yellow " id="yellow"></span>
</div>
</div>
<div class="price">
<span class="price_num">$09.00</span>
<span class="price_letter">Nine dollar only</span>
</div>
</div>
<div class="button">
<div class="button-layer"></div>
<button>Add To Cart</button>
</div>
</div>
<div class="product-card">
<div class="logo-cart">
<!--<img src="images/logo.png" alt="logo">-->
<i class='bx bx-shopping-bag'></i>
</div>
<div class="main-images">
<!--<img id="blue" class="blue active" src="images/blue.png" alt="blue">-->
<!--<img id="pink" class="pink" src="images/pink.png" alt="blue">-->
<!--<img id="yellow" class="yellow" src="images/yellow.png" alt="blue">-->
</div>
<div class="shoe-details">
<span class="shoe_name">ADDIDAS GAZE ZX</span>
<p>Lorem ipsum dolor sit lorenm i amet, consectetur adipisicing elit. Eum, ea, ducimus!</p>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bx-star' ></i>
</div>
</div>
<div class="color-price">
<div class="color-option">
<span class="color">Colour:</span>
<div class="circles">
<span class="circle blue active" id="blue"></span>
<span class="circle pink " id="pink"></span>
<span class="circle yellow " id="yellow"></span>
</div>
</div>
<div class="price">
<span class="price_num">$09.00</span>
<span class="price_letter">Nine dollar only</span>
</div>
</div>
<div class="button">
<div class="button-layer"></div>
<button>Add To Cart</button>
</div>
</div>
<div class="product-card">
<div class="logo-cart">
<!--<img src="images/logo.png" alt="logo">-->
<i class='bx bx-shopping-bag'></i>
</div>
<div class="main-images">
<!--<img id="blue" class="blue active" src="images/blue.png" alt="blue">-->
<!--<img id="pink" class="pink" src="images/pink.png" alt="blue">-->
<!--<img id="yellow" class="yellow" src="images/yellow.png" alt="blue">-->
</div>
<div class="shoe-details">
<span class="shoe_name">ADDIDAS GAZE ZX</span>
<p>Lorem ipsum dolor sit lorenm i amet, consectetur adipisicing elit. Eum, ea, ducimus!</p>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bx-star' ></i>
</div>
</div>
<div class="color-price">
<div class="color-option">
<span class="color">Colour:</span>
<div class="circles">
<span class="circle blue active" id="blue"></span>
<span class="circle pink " id="pink"></span>
<span class="circle yellow " id="yellow"></span>
</div>
</div>
<div class="price">
<span class="price_num">$09.00</span>
<span class="price_letter">Nine dollar only</span>
</div>
</div>
<div class="button">
<div class="button-layer"></div>
<button>Add To Cart</button>
</div>
</div>
<div class="product-card">
<div class="logo-cart">
<!--<img src="images/logo.png" alt="logo">-->
<i class='bx bx-shopping-bag'></i>
</div>
<div class="main-images">
<!--<img id="blue" class="blue active" src="images/blue.png" alt="blue">-->
<!--<img id="pink" class="pink" src="images/pink.png" alt="blue">-->
<!--<img id="yellow" class="yellow" src="images/yellow.png" alt="blue">-->
</div>
<div class="shoe-details">
<span class="shoe_name">ADDIDAS GAZE ZX</span>
<p>Lorem ipsum dolor sit lorenm i amet, consectetur adipisicing elit. Eum, ea, ducimus!</p>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bx-star' ></i>
</div>
</div>
<div class="color-price">
<div class="color-option">
<span class="color">Colour:</span>
<div class="circles">
<span class="circle blue active" id="blue"></span>
<span class="circle pink " id="pink"></span>
<span class="circle yellow " id="yellow"></span>
</div>
</div>
<div class="price">
<span class="price_num">$09.00</span>
<span class="price_letter">Nine dollar only</span>
</div>
</div>
<div class="button">
<div class="button-layer"></div>
<button>Add To Cart</button>
</div>
</div>
<div class="product-card">
<div class="logo-cart">
<!--<img src="images/logo.png" alt="logo">-->
<i class='bx bx-shopping-bag'></i>
</div>
<div class="main-images">
<!--<img id="blue" class="blue active" src="images/blue.png" alt="blue">-->
<!--<img id="pink" class="pink" src="images/pink.png" alt="blue">-->
<!--<img id="yellow" class="yellow" src="images/yellow.png" alt="blue">-->
</div>
<div class="shoe-details">
<span class="shoe_name">ADDIDAS GAZE ZX</span>
<p>Lorem ipsum dolor sit lorenm i amet, consectetur adipisicing elit. Eum, ea, ducimus!</p>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bx-star' ></i>
</div>
</div>
<div class="color-price">
<div class="color-option">
<span class="color">Colour:</span>
<div class="circles">
<span class="circle blue active" id="blue"></span>
<span class="circle pink " id="pink"></span>
<span class="circle yellow " id="yellow"></span>
</div>
</div>
<div class="price">
<span class="price_num">$09.00</span>
<span class="price_letter">Nine dollar only</span>
</div>
</div>
<div class="button">
<div class="button-layer"></div>
<button>Add To Cart</button>
</div>
</div>
</body>
</html>

This is piggy backing off of what Mhiko said. Put the cards in a parent div and use display grid with a grid gap. Sizing will need to be adjusted, but this is a quick example.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600&display=swap');
*{
margin: auto;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
display: grid;
align-items: center;
justify-content: center;
background-image: linear-gradient(135deg, #43CBFF 10%, #9708CC 100%);
grid-gap: 20px
}
.product-card {
position: relative;
max-width: 355px;
width: 100%;
border-radius: 25px;
padding: 20px 30px 30px 30px;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
z-index: 3;
overflow: hidden;
}
.product-card .logo-cart{
display: flex;
align-items: center;
justify-content: space-between;
}
.product-card .logo-cart img{
height: 60px;
width: 60px;
object-fit: cover;
}
.product-card .logo-cart i{
font-size: 27px;
color: #707070;
cursor: pointer;
transition: color 0.3s ease;
}
.product-card .logo-cart i:hover{
color: #333;
}
.product-card .main-images{
position: relative;
height: 210px;
}
.product-card .main-images img{
position: absolute;
height: 300px;
width: 300px;
object-fit: cover;
transform: rotate(18deg);
left: 12px;
top: -40px;
z-index: -1;
opacity: 0;
transition: opacity 0.5s ease;
}
.product-card .main-images img.active{
opacity: 1;
}
.product-card .shoe-details .shoe_name{
font-size: 24px;
font-weight: 500;
color: #161616;
}
.product-card .shoe-details p{
font-size: 12px;
font-weight: 400;
color: #333;
text-align: justify;
}
.product-card .shoe-details .stars i{
margin: 0 -1px;
color: #333;
}
.product-card .color-price .color-option{
display: flex;
align-items: center;
}
.color-price{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.color-price .color-option .color{
font-size: 18px;
font-weight: 500;
color: #333;
margin-right: 8px;
}
.color-option .circles{
display: flex;
}
.color-option .circles .circle{
height: 18px;
width: 18px;
background: #0071C7;
border-radius: 50%;
margin: 0 4px;
cursor: pointer;
transition: all 0.4s ease;
}
.color-option .circles .circle.blue.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #0071C7;
}
.color-option .circles .circle.pink{
background: #FA1795;
}
.color-option .circles .circle.pink.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #FA1795;
}
.color-option .circles .circle.yellow{
background: #F5DA00;
}
.color-option .circles .circle.yellow.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #F5DA00;
}
.color-price .price{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.color-price .price .price_num{
font-size: 25px;
font-weight: 600;
color: #707070;
}
.color-price .price .price_letter{
font-size: 10px;
font-weight: 600;
margin-top: -4px;
color: #707070;
}
.product-card .button{
position: relative;
height: 50px;
width: 100%;
border-radius: 25px;
margin-top: 30px;
overflow: hidden;
}
.product-card .button .button-layer{
position: absolute;
height: 100%;
width: 300%;
left: -100%;
background-image: linear-gradient(135deg,#9708CC, #43CBFF,#9708CC, #43CBFF );
transition: all 0.4s ease;
border-radius: 25PX;
}
.product-card .button:hover .button-layer{
left: 0;
}
.product-card .button button{
position: relative;
height: 100%;
width: 100%;
background: none;
outline: none;
border: none;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
color: #fff;
}
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<div class="parent">
<div class="product-card">
<div class="logo-cart">
<!--<img src="images/logo.png" alt="logo">-->
<i class='bx bx-shopping-bag'></i>
</div>
<div class="main-images">
<!--<img id="blue" class="blue active" src="images/blue.png" alt="blue">-->
<!--<img id="pink" class="pink" src="images/pink.png" alt="blue">-->
<!--<img id="yellow" class="yellow" src="images/yellow.png" alt="blue">-->
</div>
<div class="shoe-details">
<span class="shoe_name">ADDIDAS GAZE ZX</span>
<p>Lorem ipsum dolor sit lorenm i amet, consectetur adipisicing elit. Eum, ea, ducimus!</p>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bx-star' ></i>
</div>
</div>
<div class="color-price">
<div class="color-option">
<span class="color">Colour:</span>
<div class="circles">
<span class="circle blue active" id="blue"></span>
<span class="circle pink " id="pink"></span>
<span class="circle yellow " id="yellow"></span>
</div>
</div>
<div class="price">
<span class="price_num">$09.00</span>
<span class="price_letter">Nine dollar only</span>
</div>
</div>
<div class="button">
<div class="button-layer"></div>
<button>Add To Cart</button>
</div>
</div>
<div class="product-card">
<div class="logo-cart">
<!--<img src="images/logo.png" alt="logo">-->
<i class='bx bx-shopping-bag'></i>
</div>
<div class="main-images">
<!--<img id="blue" class="blue active" src="images/blue.png" alt="blue">-->
<!--<img id="pink" class="pink" src="images/pink.png" alt="blue">-->
<!--<img id="yellow" class="yellow" src="images/yellow.png" alt="blue">-->
</div>
<div class="shoe-details">
<span class="shoe_name">ADDIDAS GAZE ZX</span>
<p>Lorem ipsum dolor sit lorenm i amet, consectetur adipisicing elit. Eum, ea, ducimus!</p>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bx-star' ></i>
</div>
</div>
<div class="color-price">
<div class="color-option">
<span class="color">Colour:</span>
<div class="circles">
<span class="circle blue active" id="blue"></span>
<span class="circle pink " id="pink"></span>
<span class="circle yellow " id="yellow"></span>
</div>
</div>
<div class="price">
<span class="price_num">$09.00</span>
<span class="price_letter">Nine dollar only</span>
</div>
</div>
<div class="button">
<div class="button-layer"></div>
<button>Add To Cart</button>
</div>
</div>
<div class="product-card">
<div class="logo-cart">
<!--<img src="images/logo.png" alt="logo">-->
<i class='bx bx-shopping-bag'></i>
</div>
<div class="main-images">
<!--<img id="blue" class="blue active" src="images/blue.png" alt="blue">-->
<!--<img id="pink" class="pink" src="images/pink.png" alt="blue">-->
<!--<img id="yellow" class="yellow" src="images/yellow.png" alt="blue">-->
</div>
<div class="shoe-details">
<span class="shoe_name">ADDIDAS GAZE ZX</span>
<p>Lorem ipsum dolor sit lorenm i amet, consectetur adipisicing elit. Eum, ea, ducimus!</p>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bx-star' ></i>
</div>
</div>
<div class="color-price">
<div class="color-option">
<span class="color">Colour:</span>
<div class="circles">
<span class="circle blue active" id="blue"></span>
<span class="circle pink " id="pink"></span>
<span class="circle yellow " id="yellow"></span>
</div>
</div>
<div class="price">
<span class="price_num">$09.00</span>
<span class="price_letter">Nine dollar only</span>
</div>
</div>
<div class="button">
<div class="button-layer"></div>
<button>Add To Cart</button>
</div>
</div>
</div>
<div class="parent">
<div class="product-card">
<div class="logo-cart">
<!--<img src="images/logo.png" alt="logo">-->
<i class='bx bx-shopping-bag'></i>
</div>
<div class="main-images">
<!--<img id="blue" class="blue active" src="images/blue.png" alt="blue">-->
<!--<img id="pink" class="pink" src="images/pink.png" alt="blue">-->
<!--<img id="yellow" class="yellow" src="images/yellow.png" alt="blue">-->
</div>
<div class="shoe-details">
<span class="shoe_name">ADDIDAS GAZE ZX</span>
<p>Lorem ipsum dolor sit lorenm i amet, consectetur adipisicing elit. Eum, ea, ducimus!</p>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bx-star' ></i>
</div>
</div>
<div class="color-price">
<div class="color-option">
<span class="color">Colour:</span>
<div class="circles">
<span class="circle blue active" id="blue"></span>
<span class="circle pink " id="pink"></span>
<span class="circle yellow " id="yellow"></span>
</div>
</div>
<div class="price">
<span class="price_num">$09.00</span>
<span class="price_letter">Nine dollar only</span>
</div>
</div>
<div class="button">
<div class="button-layer"></div>
<button>Add To Cart</button>
</div>
</div>
<div class="product-card">
<div class="logo-cart">
<!--<img src="images/logo.png" alt="logo">-->
<i class='bx bx-shopping-bag'></i>
</div>
<div class="main-images">
<!--<img id="blue" class="blue active" src="images/blue.png" alt="blue">-->
<!--<img id="pink" class="pink" src="images/pink.png" alt="blue">-->
<!--<img id="yellow" class="yellow" src="images/yellow.png" alt="blue">-->
</div>
<div class="shoe-details">
<span class="shoe_name">ADDIDAS GAZE ZX</span>
<p>Lorem ipsum dolor sit lorenm i amet, consectetur adipisicing elit. Eum, ea, ducimus!</p>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bx-star' ></i>
</div>
</div>
<div class="color-price">
<div class="color-option">
<span class="color">Colour:</span>
<div class="circles">
<span class="circle blue active" id="blue"></span>
<span class="circle pink " id="pink"></span>
<span class="circle yellow " id="yellow"></span>
</div>
</div>
<div class="price">
<span class="price_num">$09.00</span>
<span class="price_letter">Nine dollar only</span>
</div>
</div>
<div class="button">
<div class="button-layer"></div>
<button>Add To Cart</button>
</div>
</div>
<div class="product-card">
<div class="logo-cart">
<!--<img src="images/logo.png" alt="logo">-->
<i class='bx bx-shopping-bag'></i>
</div>
<div class="main-images">
<!--<img id="blue" class="blue active" src="images/blue.png" alt="blue">-->
<!--<img id="pink" class="pink" src="images/pink.png" alt="blue">-->
<!--<img id="yellow" class="yellow" src="images/yellow.png" alt="blue">-->
</div>
<div class="shoe-details">
<span class="shoe_name">ADDIDAS GAZE ZX</span>
<p>Lorem ipsum dolor sit lorenm i amet, consectetur adipisicing elit. Eum, ea, ducimus!</p>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bx-star' ></i>
</div>
</div>
<div class="color-price">
<div class="color-option">
<span class="color">Colour:</span>
<div class="circles">
<span class="circle blue active" id="blue"></span>
<span class="circle pink " id="pink"></span>
<span class="circle yellow " id="yellow"></span>
</div>
</div>
<div class="price">
<span class="price_num">$09.00</span>
<span class="price_letter">Nine dollar only</span>
</div>
</div>
<div class="button">
<div class="button-layer"></div>
<button>Add To Cart</button>
</div>
</div>
</div>
</body>
</html>

I recommend you use flexbox or use display: grid, and then to show 3 columns in a row, you use grid-template-columns. Then, you can use grid gap for spacing. Hope this help!
parent div:
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px
}

Creating a multi level hamburger menu with buttons that expand the hamburger levels

I want to create an animated hamburger menu with buttons that expand the next level.
I know that my code is very far away from that but I am completely stuck with the problem. And will show you my progress anyways.
https://jsfiddle.net/TheBB23/hnsjym9u/
I copied this code from a website for you to get a clear definition of what I want. https://jsfiddle.net/TheBB23/uw2jzge1/
As I said I am completely stuck and would appreciate any kind of help.
$('.circle-plus').on('click', function() {
$(this).toggleClass('opened');
})
var coll = document.getElementsByClassName("hamburger");
var hideLinks = document.querySelectorAll('.mobilemenuitems a');
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var mobilemenuitems = this.nextElementSibling;
if (mobilemenuitems.style.display === "block") {
mobilemenuitems.style.display = "none";
} else {
mobilemenuitems.style.display = "block";
}
});
}
var hamburger = document.querySelector(".hamburger");
var header = document.querySelector(".header");
// On click
hamburger.addEventListener("click", function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
header.classList.toggle("header--is-active");
// Do something else, like open/close menu
});
document.onload = document.getElementsByClassName("mobilemenuspace")[0].style.display = "none";
document.getElementsByClassName("mobilemenuspace")[0].addEventListener("click", function() {
this.style.display = "none";
hamburger.classList.toggle("is-active");
});
body {
margin: 0px;
padding: 0px;
background: white;
color: #24603c;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
section {
height: 50px;
width: 100%;
}
/* Responsive (Smartphone) Menu */
#media (max-width: 1000px) {
/* Bild oben links Style */
.logo img {
height: 50px;
position: fixed;
float: left;
z-index: 3;
}
.login-container {
display: none;
}
.LogoutArea {
display: none;
}
#nav {
display: none;
}
/* Platzhalter Menü*/
section {
height: 50px;
width: 100%;
background: rgba(237, 237, 237, 1);
background: -moz-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(237, 237, 237, 1)), color-stop(53%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
background: -o-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
background: -ms-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(to bottom, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff', GradientType=0);
}
.nav {
height: 50px;
width: 100%;
background: #24603c;
position: fixed;
z-index: 2;
}
#BurgerSpace>div>button {
position: fixed;
right: 0px;
top: 0px;
z-index: 3;
background: none;
}
#BurgerSpace {
position: relative !important;
}
#BurgerSpace>div {
position: relative !important;
}
#BurgerSpace>div>div {
display: block;
margin-top: 50px;
}
#BurgerSpace {
width: 100%;
height: 50px;
display: block;
position: absolute;
float: right;
margin-right: 0;
padding-right: 0px;
padding-top: -2px;
}
}
.mobilemenuspace {
display: none;
width: 100%;
position: relative;
z-index: 1;
right: 0;
margin-top: 50px;
background: white;
}
#media (min-width: 1000px) {
.mobilemenuspace {
display: none !important;
}
}
#mobilemenufirstorder>a {
text-decoration: none !important;
font-weight: bold;
list-style: none !important;
font-size: 28px;
line-height: 28px;
height: 100%;
display: block;
height: 28px;
padding-top: 26px;
padding-bottom: 26px;
padding-left: 25px;
}
#mobilemenufirstorder>a:hover {
color: lightgrey !important;
}
#mobilemenufirstorder>a:hover+div {
display: block !important;
}
#mobilemenufirstorder {
height: 80px;
width: 100%;
border-bottom: solid 2px lightgrey;
border-top: solid 2px lightgrey;
list-style: none !important;
text-decoration: none !important;
}
.mobilemenuitems>li {
list-style: none;
text-decoration: none;
}
.mobilemenuitems {
display: block;
}
.mobilemenusecondorder {
display: none;
}
.closed .vertical {
transition: all 0.5s ease-in-out;
transform: rotate(-90deg);
}
.closed .horizontal {
transition: all 0.5s ease-in-out;
transform: rotate(-90deg);
opacity: 1;
}
.opened {
opacity: 1;
}
.opened .vertical {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
}
.opened .horizontal {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
opacity: 0;
}
.circle-plus {
height: 4em;
width: 4em;
font-size: 1em;
opacity: 0.7;
}
.circle-plus .circle {
position: relative;
width: 2.55em;
height: 2.5em;
}
.circle-plus .circle .horizontal {
position: absolute;
background-color: red;
width: 30px;
height: 5px;
left: 50%;
margin-left: -15px;
top: 50%;
margin-top: -2.5px;
}
.circle-plus .circle .vertical {
position: absolute;
background-color: red;
width: 5px;
height: 30px;
left: 50%;
margin-left: -2.5px;
top: 50%;
margin-top: -15px;
}
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover .hamburger-inner::after {
background: lightgrey;
}
.hamburger:hover .hamburger-inner::before {
background: lightgrey;
}
.hamburger:hover .hamburger-inner {
background: lightgrey;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 40px;
height: 4px;
background-color: white;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
.hamburger--collapse .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.13s;
transition-delay: 0.13s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse .hamburger-inner::after {
top: -20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.hamburger--collapse .hamburger-inner::before {
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse.is-active .hamburger-inner {
transform: translate3d(0, -10px, 0) rotate(-45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--collapse.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.hamburger--collapse.is-active .hamburger-inner::before {
top: 0;
transform: rotate(-90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.header--is-active {
display: flex;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function myFunction() {
$('.mobilemenusecondorder').css('display', 'block');
}
</script>
</head>
<div class="nav">
<div id="BurgerSpace">
<div class="header">
<button class="hamburger hamburger--collapse" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="mobilemenuspace">
<div class="mobilemenuitems">
<li>
<div id="mobilemenufirstorder">
HOCKEY
<button onclick="myFunction()">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</button>
</div>
<div class="mobilemenusecondorder">
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?action=*1.Herren">1. Herren</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*1.Damen">1. Damen</a>
</li>
<li class="menulevel1">
<a class=" " href="#">Jugend <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel2">
<a class=" " href="?action=*Hockey-Jugend">Jugend</a>
<li class="menulevel2">
<a class=" " href="?action=*MJA">M�nnliche Jugend A</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MJB">M�nnliche Jugend B</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnA">A Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnB">B Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnC">C Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnD">D Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnE">E Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*WJA">Weibliche Jugend A</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*WJB">Weibliche Jugend B</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaA">A M�dchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaB">B M�dchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaC">C M�dchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaD">D M�dchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaE">E M�dchen</a>
</li>
</ul>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Erwachsene">Erwachsene</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Trainingsplan">Trainingsplan</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Schiedsrichter">Schiedsrichter</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Links">offizielle Links</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=events_gruppe&id=975">Kalender</a>
</li>
</ul>
</div>
</li>
<li>
<div id="mobilemenufirstorder">
TENNIS
<button onclick="myFunction()">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</button>
</div>
<div class="mobilemenusecondorder">
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Herren">HERREN</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Damen">DAMEN</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Jugend">JUGEND</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Trainer">TRAINER</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Schule">TENNISSCHULE</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*_action_events_gruppe_id_976">KALENDER</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=platzbuchung_woche&id=117">PLATZBUCHUNG</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Links">OFFIZIELLE LINKS</a>
</li>
</ul>
</div>
</li>
<li>
<div id="mobilemenufirstorder">
UHLEN.TV
<button onclick="myFunction()">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</button>
</div>
<div class="mobilemenusecondorder"> </div>
</li>
<li>
<div id="mobilemenufirstorder">
MEIN.HTCU
<button onclick="myFunction()">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</button>
</div>
<div class="mobilemenusecondorder">
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?action=profile_edit">PROFIL</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=start_news&cmd=list">ARTIKEL</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_meinerechnungen">Meine Rechnungen</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_mitgliedsbescheinigung">Meine Mitgliedsbescheinigung</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_teilnahmebescheinigung">Meine Teilnahmebescheinigungen</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_interessen">Meine Interessen</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=events_meinetermine">Meine Termine</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_wunschmeine">Meine Support-Anfragen</a>
</li>
</ul>
</div>
</li>
<li>
<div id="mobilemenufirstorder">
ADMIN
<button onclick="myFunction()">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</button>
</div>
<div class="mobilemenusecondorder">
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="#">KASSE <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel2">
<a class=" " href="?module=kasse">KASSE</a>
<li class="menulevel2">
<a class=" " href="?action=kasse_tasks">Startseite</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=kasse_beleg">SPESEN</a>
</li>
<li class="dropdown dropdown-submenu menulevel2">
Belege <span class="fa arrow"></span>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_buchung&cmd=addmulti">Belegschnellerfassung</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_angebote">Angebote</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_rechnungneu">Neue Rechnung</a>
</li>
</ul>
</li>
<li class="menulevel2">
<a class=" " href="?action=members_beitragaktuell">BEITR�GE</a>
</li>
<li class="dropdown dropdown-submenu menulevel2">
Rechnungen <span class="fa arrow"></span>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=0">Rechnungen unverschickt</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=1">Rechnungen offen</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=2">Rechnungen in Bezahlung</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=3">Rechnungen bezahlt</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=6">Rechnungen alle</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_faellig">�bersichten</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_einzug">SEPA-�W/Einzug</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-submenu menulevel2">
Buchf�hrung <span class="fa arrow"></span>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_journal">Journal</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_guv">Gewinn und Verlust</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_bilanzoffenk">�bersichten</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_kontenrahmen">Kontenrahmen</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-submenu menulevel2">
Barkasse <span class="fa arrow"></span>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_barkasse&konto=1000">Hauptkasse</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-submenu menulevel2">
Bankkonten <span class="fa arrow"></span>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_kontouebersicht">(�bersicht)</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_bank&bankkonto=250">Vereinskonto Sparkasse</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_overview">�BERBLICK</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_basis">BASISKONFIG</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_optionen">OPTIONEN</a>
</li>
<li class="dropdown dropdown-submenu menulevel1">
VORLAGEN <span class="fa arrow"></span>
<ul class="menulist">
<li class="menulevel2">
<a class=" " href="?action=admin_mailtemplates">MAIL</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=admin_pdftemplates">PDF</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=admin_static">HTML</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=admin_antraege">Antr�ge</a>
</li>
</ul>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_wunsch">Support-Anfragen</a>
</li>
</ul>
</div>
</li>
</div>
</div>
</div>
</div>
</div>

Here is a basic example you can start with and improve it if needed.
$(function () {
var $menu = $('.menu');
var $menuItems = $menu.find('.menu-item');
for (var i = 0; i < $menuItems.length; i++) {
var $menuItem = $menuItems.eq(i);
if ($menuItem.children('.children').length > 0) {
var $expandCollapseButton = $menuItem.children('.children').hasClass('hidden')?$('<i class="fa fa-plus-square-o"></i>'):$('<i class="fa fa-minus-square-o"></i>');
$expandCollapseButton.insertAfter($menuItem.find('> a')).on('click', expandCollapse);
}
}
})
function expandCollapse(e) {
var $expandCollapseButton = $(this)
var $children = $expandCollapseButton.siblings('.children');
if($children.hasClass('hidden')){
$expandCollapseButton.removeClass('fa-plus-square-o').addClass('fa-minus-square-o');
}else {
$expandCollapseButton.removeClass('fa-minus-square-o').addClass('fa-plus-square-o');
}
$children.toggleClass('hidden');
}
a {
text-decoration: none;
}
body {
font-family: 'Ubuntu', sans-serif;
}
.menu-item {
margin-bottom: 10px;
min-width: 150px;
}
.menu-item>i {
margin-left: 5px;
cursor: pointer;
}
.menu-item>i:hover {
color: crimson;
}
.child-item {
margin-left: 20px;
}
.children {
height: 80px;
overflow: hidden;
transition: height .4s;
}
.children.hidden {
height: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="menu-item">
Item 1
<div class="children">
<div class="child-item menu-item">
Child 1 of Item 1
</div>
<div class="child-item menu-item">
Child 2 of Item 1
</div>
<div class="child-item menu-item">
Child 3 of Item 1
</div>
</div>
</div>
<div class="menu-item">
Item 2
<div class="children hidden">
<div class="child-item menu-item">
Child 1 of Item 2
</div>
<div class="child-item menu-item">
Child 2 of Item 2
</div>
<div class="child-item menu-item">
Child 3 of Item 2
</div>
</div>
</div>
<div class="menu-item">
Item 3
<div class="children">
<div class="child-item menu-item">
Child 1 of Item 3
</div>
<div class="child-item menu-item">
Child 2 of Item 3
</div>
<div class="child-item menu-item">
Child 3 of Item 3
</div>
</div>
</div>
<div class="menu-item">
Item 4
</div>
<div class="menu-item">
Item 5
</div>
</div>

make arrow icon appear when input category menu is checked CSS3

I having some inconveniences to make a font-awesome icon appear when the input is checked.
It is for a portfolio gallery section, and I've added the icon inside the label, so the goal is that when I select the category menu, that shows a border-bottom and the icon pointing down.
So far, I just could make the border work, but I can't get this icon showing up.
I've already try with the opacity but I'am not sure if I am using the input selector as I should.
It should work to all the categories in the same way.
Could someone tell me if this can be done?
I appreciate any help on this.
body {
margin: auto;
background: #F2F5E9;
width: 100%;
font-family: "Arial"
}
.containergallery {
text-align: center;
margin-top: 30px;
}
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 0 8% 2% 5%;
flex-wrap: wrap;
}
ul.gallery li {
list-style-type: none;
margin-top: 40px;
opacity: 1;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
label {
position: relative;
text-align: center;
font-family: 'robotoregular', sans-serif;
cursor: pointer;
color: #fff;
background: #cccccc;
padding: 0.5%;
overflow: hidden;
}
input[type="radio"]:checked+label {
background: #22b0b4;
border-bottom: 4px solid #000;
}
.fa-caret-down {
position: absolute;
left: 45%;
top: 75%;
color: #000;
font-size: 26px;
opacity: 0;
}
/*menu rounded corners*/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="containergallery">
<input type="radio" id="select-all" name="button" onclick="myFunction()">
<label for="select-all" class="label-all">
<i class="fas fa-caret-down"></i>
All works
</label>
<input type="radio" id="select-creative" name="button">
<label for="select-creative" class="label-creative">
Creative
</label>
<input type="radio" id="select-corporate" name="button">
<label for="select-corporate" class="label-corporate">
Corporate
</label>
<input type="radio" id="select-portfolio" name="button">
<label for="select-portfolio" class="label-portfolio">
Portfolio
</label>
<ul class="gallery">
<li class="creative-item">
<img src="01.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="creative-item">
<img src="02.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="03.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="creative-item">
<img src="04.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="corporate-item">
<img src="05.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="06.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="07.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="corporate-item">
<img src="08.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
</ul>
</div>
</body>
</html>

You need to add this css code :
input[type="radio"]:checked+label i {
opacity: 1;
}
This will set the opacity of the icon to 1 when the corresponding radio button is checked
body {
margin: auto;
background: #F2F5E9;
width: 100%;
font-family: "Arial"
}
.containergallery {
text-align: center;
margin-top: 30px;
}
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 0 8% 2% 5%;
flex-wrap: wrap;
}
ul.gallery li {
list-style-type: none;
margin-top: 40px;
opacity: 1;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
label {
position: relative;
text-align: center;
font-family: 'robotoregular', sans-serif;
cursor: pointer;
color: #fff;
background: #cccccc;
padding: 0.5%;
overflow: hidden;
}
input[type="radio"]:checked+label {
background: #22b0b4;
border-bottom: 4px solid #000;
}
.fa-caret-down {
position: absolute;
left: 45%;
top: 75%;
color: #000;
font-size: 26px;
opacity: 0;
}
input[type="radio"]:checked+label i {
opacity: 1;
}
/*menu rounded corners*/
.label-all {
border-radius: 3px 0 0 3px;
}
.label-portfolio {
border-radius: 0 3px 3px 0;
}
input {
display: none;
}
img {
display: block;
width: 300px;
height: auto;
}
li {
position: relative;
width: 300px;
}
/*Overlay effect for photos*/
li:hover .overlay,
.container:hover .fa-eye {
opacity: 1;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
width: 100%;
transition: .5s ease;
opacity: 0;
height: 35%;
}
.text {
color: #f1f1f1;
font-size: 14px;
text-align: left;
padding: 0 5px 5px 10px;
line-height: 1.6;
}
.fa-eye {
position: absolute;
right: 5px;
top: -26px;
color: #fff;
border: 2px solid #fff;
border-radius: 100%;
background-color: #22b0b4;
padding: 15px;
overflow: visible;
}
/*Select Categorie*/
input#select-creative:checked~.gallery li:not(.creative-item),
input#select-corporate:checked~.gallery li:not(.corporate-item),
input#select-portfolio:checked~.gallery li:not(.portfolio-item) {
opacity: 0.1;
}
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<div class="containergallery">
<input type="radio" id="select-all" name="button" onclick="myFunction()">
<label for="select-all" class="label-all">
<i class="fas fa-caret-down"></i>
All works
</label>
<input type="radio" id="select-creative" name="button">
<label for="select-creative" class="label-creative">
<i class="fas fa-caret-down"></i>
Creative
</label>
<input type="radio" id="select-corporate" name="button">
<label for="select-corporate" class="label-corporate">
<i class="fas fa-caret-down"></i>
Corporate
</label>
<input type="radio" id="select-portfolio" name="button">
<label for="select-portfolio" class="label-portfolio">
<i class="fas fa-caret-down"></i>
Portfolio
</label>
<ul class="gallery">
<li class="creative-item">
<img src="01.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="creative-item">
<img src="02.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="03.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="creative-item">
<img src="04.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="corporate-item">
<img src="05.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="06.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="07.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="corporate-item">
<img src="08.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
</ul>
</div>

Animating sidemenu on hover

I want to show only the icons as default and on hover slide the sidemenu to the current state you see in the jsfiddle
Thanks in advance
https://jsfiddle.net/aq9Laaew/228/
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i>
<span>Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
<span>Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i>
<span>Messages</span>
</a>
</div>
</div>
</div>
</div>

You can do it by changing navbars values on hover like this:
#sidebar {
letter-spacing: 0.1em;
font-weight: 500;
border-right: 1px solid #797979;
padding-top: 50px;
position: fixed;
z-index: 1000;
width: 65px;
height: 100vh;
background: #2c2c2c;
transition:1s;
}
#sidebar:hover{
width: 259px;
}
#sidebar:hover .sidebar-item span{
opacity:1;
}
.sidebar-item {
padding: 10px 20px;
border-left: 5px solid transparent;
}
.sidebar-item span{
opacity:0;
transition:1s;
}
.sidebar-active {
border-left: 5px solid #b1a0ff;
color: #b1a0ff;
background: #474747;
}
.sidebar-item a {
align-items: center;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i>
<span>Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
<span>Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i>
<span>Messages</span>
</a>
</div>
</div>
</div>
</div>

So from the comments this wasn't exactly what you were after but I put this together and might as well share it here anyway.
It animates the label in on hover using relative position and CSS transition. It does involve some changes to the HTML.
https://jsfiddle.net/Chipmo/111dd0sj/1/
#sidebar {
letter-spacing: 0.1em;
font-weight: 500;
border-right: 1px solid #797979;
padding-top: 50px;
position: fixed;
z-index: 1000;
width: 259px;
height: 100vh;
background: #2c2c2c;
}
.sidebar-item {
padding-top: 20px;
}
.sidebar-item a {
align-items: center;
}
.sidebar-item i {}
.sidebar-left-cover {
background: #2c2c2c;
width: 40px;
height: 100%;
z-index: 2;
padding-left: 20px;
}
.sidebar-item .sidebar-label {
position: relative;
right: 100px;
transition: right 0.5s;
z-index: 1;
}
.sidebar-item:hover .sidebar-label {
right: -5px;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i></div>
<span class="sidebar-label">Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
</div>
<span class="sidebar-label">Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i></div>
<span class="sidebar-label">Messages</span>
</a>
</div>
</div>
</div>
</div>

Custom menu using jQuery and CSS

I'm trying to create a sidebar menu, but I am not sure really where to start.
How I need it to work is in the image below, when the main nav link 1 is clicked, it will slide in the sub nav items from the right that are associated to that selection. Obviously main nav link 2 will have it's own options too and link 3 could have no sub nav items.
Thanks in advance for any assistance!
Here's what I have so far:
$(".primary-nav .box").click(function(e) {
e.preventDefault();
$('.primary-nav').addClass('hidden-xs-up')
$('.secondary-nav').removeClass('hidden-xs-up');
});
$(".back-btn").click(function(e) {
e.preventDefault();
$('.secondary-nav').addClass('hidden-xs-up');
$('.primary-nav').removeClass('hidden-xs-up');
});
.sidebar {
background-color: #434a54;
height: 500px;
width: 120px;
margin: 60px auto;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2);
}
.sidebar .box {
color: #aab2bd;
display: block;
text-align: center;
border-bottom: 1px solid #656d78;
padding: 20px 10px;
text-decoration: none !important;
transition: .2s;
}
.sidebar .box:hover {
background-color: #4a89dc;
color: #f5f7fa;
}
.sidebar .nav-icon {
font-size: 30px;
display: block;
margin-bottom: 5px;
}
.sidebar .back-btn {
background-color: #4a89dc;
color: #f5f7fa;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="sidebar">
<div class="primary-nav">
<a href="#" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary
</a>
<a href="#" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary
</a>
<a href="#" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary
</a>
<a href="#" class="box">
More <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
</div>
<div class="secondary-nav hidden-xs-up">
<a href="#" class="box back-btn">
<i class="fa fa-arrow-left" aria-hidden="true"></i> Back
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/fj4Lou7w/

Based on your code and whitout change your markup I have a few suggestions to make simpler your slide-in animation:
Use position absolute for the secondary navs.
Use a class and transition to make the slide animation.
Use a reference from your primary buttons to target the right secondary element.
$(".primary-nav .box").click(function(e) {
e.preventDefault();
var targ = $(this).attr('href');
$(targ).addClass('showsub');
});
$(".back-btn").click(function(e) {
e.preventDefault();
$('.secondary-nav').removeClass('showsub');
});
.sidebar {
position:relative;
background-color: #434a54;
height: 500px;
width: 120px;
margin: 60px auto;
overflow:hidden;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2);
}
.sidebar .box {
color: #aab2bd;
display: block;
text-align: center;
border-bottom: 1px solid #656d78;
padding: 20px 10px;
text-decoration: none !important;
transition: .2s;
}
.sidebar .box:hover {
background-color: #4a89dc;
color: #f5f7fa;
}
.sidebar .nav-icon {
font-size: 30px;
display: block;
margin-bottom: 5px;
}
.sidebar .back-btn {
background-color: #4a89dc;
color: #f5f7fa;
}
.secondary-nav {
position:absolute;
z-index:10;
left:100%;
top:0;
width:100%;
background-color: #434a54;
transition:left .2s linear;
}
.secondary-nav.showsub {
left:0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="sidebar">
<div class="primary-nav">
<a href="#sec1" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary1
</a>
<a href="#sec2" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary2
</a>
<a href="#" class="box">
More <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
</div>
<div class="secondary-nav" id="sec1">
<a href="#" class="box back-btn">
<i class="fa fa-arrow-left" aria-hidden="true"></i> Back
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
</div>
<div class="secondary-nav" id="sec2">
<a href="#" class="box back-btn">
<i class="fa fa-arrow-left" aria-hidden="true"></i> Back
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary2
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary2
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary2
</a>
</div>
</div>
</div>
</div>
</div>

it is not the best solution, but on hover you can hide, move,... elements in the DOM with CSS like:
[
body {
font-family: Arial;
padding: 40px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
position: relative;
width: 60px;
}
ul.submenu {
opacity: 0;
position: absolute;
top: 0;
left: 120px;
transition: all 400ms ease-in-out;
}
ul li {
border-top: 1px solid white;
}
ul li a {
display: block;
background-color: #434a54;
text-align: center;
color: white;
text-decoration: none;
padding: 20px 0;
}
ul li:hover .submenu {
opacity: 1;
left: 61px;
}
<ul class="mainmenu">
<li>
Menu1
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</li>
<li>Menu2
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul></li>
<li>Menu3
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul></li>
<li>Menu4
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul></li>
</ul>

Categories

Resources