jQuery toggleClass example

Toggle class name on click in jQuery

by ZerroOne

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;900&display=swap" rel="stylesheet">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/zerro.css">
	<link rel="shortcut icon" type="image/x-icon" href="img/icon line/kisspng-pizza-pepperoni-clip-art-pizza-5ac59dcfda3d61.9766157015229004318939.jpg">
	<title>Project 3</title>
</head>
<body>
		<header class="header">
			<div class="conteiner">
				<div class="header__body">

					<a href="index.html" class="header__logo">
						<img src="img/logo/Ellipse 2.png" alt="">
					</a>

					<div class="header__burger"><span></span></div>




					<div class="header__menu">
						<ul class="header__list">
							<li>
								<a href="#" class="header__link">Новости
								</a>
							</li>

							<li>
								<a href="#" class="header__link">Соц.Сети
								</a>
							</li>

							<li>
								<a href="#" class="header__link">
									Магазин
								</a>
							</li>

							<li>
								<a href="#" class="header__link">Связь
								</a>
							</li>

						</ul>
					</div>

				</div>
			</div>
		</header>



	<main>
		<div class="main__bg">
			

				<div class="content__main">
						<div class="content">
							<h1>Пица у Донни</h1>
							<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy since the 1500s. <br>Больше в:</h2>
							
							<a href="https://www.instagram.com/" target="_blank" onclick=""> INSAGRAMM</a>
						</div>


						<div class="pizza">
							<img  src="img/main/pizza/pizza-1-1.png" alt="">
						</div> 
				</div>

		</div>

			<div class="main__info">
							
				<div class="main__h">
					<p>Меню </p>
				</div>

				<div class="main__p">
					<p>Выбор качественных товаров от...

CSS

/*font-family: 'Montserrat', sans-serif;
font-family: 'Roboto', sans-serif;*/
main {
	background-color: #eaeaea;
	padding-bottom: 95px;
}







.header {

	width: 100%;
	left: 0;
	top: 0;
	background-color: #eaeaea;
}



.header__body {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header__body img {
	padding-bottom: 25px;
	max-width: 100%;
}
.header__logo {
	flex: 0 0 175px;
}

.header__list {
	display: flex;
}
.header__list a{
	font-family: 'Montserrat', sans-serif;
	color: #494949;
	font-size: 17px;
	font-weight: 600;
	text-transform: uppercase;
}
.header__list li{
	margin-left: 40px;
}


.conteiner {
	max-width: 1170px;
	margin:0 auto;
	padding: 20px 10px;
}

.header__burger {
	display: none;
}

@media  (max-width: 767px) {
	body.lock{
		overflow: hidden;
	}
	.header__menu{
		margin: 70px  0;
	}
	.header__logo {
		margin-top: 7px;
		flex: 0 0 100px;
	}
	.conteiner {
		padding: 0 10px;
	}

	.header__burger {
		display: block;
		position: relative;
		width: 30px;
		height: 20px;
		z-index: 2;
		cursor: pointer;
	}
	.header__burger span{
		position: absolute;
		top: 0;
		left: 0;
		background-color: #000;
		width: 100%;
		height: 2px;
		top: 9px;
		transition: 0.5s all ease;
	}
	.header__burger:before,
	.header__burger:after{
		content: '';
		background-color: #000;
		position: absolute;
		width: 100%;
		height: 2px;
		left: 0;
		transition: 0.5s all ease;
	}
	.header__burger:before {
		top: 1px;
	}
	.header__burger:after {
		bottom: 1px;
	}


	.header__burger.active:before {
		transform: rotate(135deg);
		top: 9px;
	}
	.header__burger.active:after {
		transform: rotate(-135deg);
		bottom: 9px;
	}
	.header__burger.active span{
		display: none;
	}


	.header__menu {
		z-index: 1;
		position: fixed;
		top: 0px;
		opacity: 0;
		left: -1100px;
		width: 100%;
		height: 100%;
		background-image: url('../img/main/bg/Rectangle 1.png');
		padding: 25px 0;
		transition: 0.5s top, .6s opacity;
	}

	.header__menu.active {
		top:0;
		left:...

JavaScript

/*$(document).ready(function() {
	$('.header__burger').click(function(event) {
		$('.header__berger,.header__menu').toggleClass('active');
});
*/
let header__burger = document.querySelector('.header__burger');
let header_menu = document.querySelector('.header__menu');
let back = document.querySelector('body');
let header__list = document.querySelector('.header__list');





header__burger.onclick = function(){
    header__burger.classList.toggle('active');
    header_menu.classList.toggle('active');
    back.classList.toggle('lock');
}

header__list.onclick = function () {
    header__list.classList.remove('active');
}




$('#one').on('focus' , function(){
	$('#one__second ,  #two__second ,  #thre__second ,  #fore__second').removeClass('dnone dflex');

	$('#one__second').toggleClass('dflex');
	$('#two__second ,  #fore__second ,  #thre__second').toggleClass('dnone');
}) ;


$('#two').on('focus' , function(){
	$('#one__second ,  #two__second ,  #thre__second ,  #fore__second').removeClass('dnone dflex');


	$('#one__second ,  #thre__second ,  #fore__second').toggleClass('dnone');
	$('#two__second').toggleClass('dflex');
}) ;


$('#thre').on('focus' , function(){
	$('#one__second ,  #two__second ,  #thre__second ,  #fore__second').removeClass('dnone dflex');

	$('#one__second ,  #fore__second ,  #two__second').toggleClass('dnone');
	$('#thre__second').toggleClass('dflex');

}) ;


$('#fore').on('focus' , function(){
$('#one__second , #two__second ,  #thre__second ,  #fore__second').removeClass('dnone dflex');

	
	$('#one__second , #thre__second , #two__second').toggleClass('dnone');
	$('#fore__second').toggleClass('dflex');
}) ;