Can this JQuery code be minimized

[codeispoetry]

<div class="hamburger menu btn2">
	<div class="top"></div>
	<div class="middle"></div>
	<div class="bottom"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
	$('.menu').click (function(){
	  // $(this).toggleClass('clicked');
	  $(".top").toggleClass('clicked');
	  $(".middle").toggleClass('clicked');
	  $(".bottom").toggleClass('clicked');
	});

</script>

This code is working 100% fine, but is any room left to minimize this code?

[codeispoetry]

I tried one posisbility it worked:

$('.menu').click (function(){
  $(".hamburger div").toggleClass('clicked');
});

[PaulOB]

@codeispoetry

I tried one posisbility it worked:

You don’t need to change the class on every element in that hamburger. Just toggle a single class on the hamburger itself and then css can use that class to change the children.

e.g.

$('.menu').click (function(){
  $(".hamburger").toggleClass('clicked');
});

.clicked .middle {
  transition-duration: 0.5s;
  background: transparent;
}
.clicked .top {
  transform: rotateZ(45deg) scaleX(1.25) translate(13px, 13px);
}
.clicked .bottom {
  transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
}

[codeispoetry]

@PaulOB

You don’t need to change the class on every element in that hamburger

Right, Thanks!

[codeispoetry]

I was transitioning from JQuery to JS, but getting a very fundamental error in the console:

<script>
	$('.menu').click (function(){
	  $(".hamburger").toggleClass('clicked');
	  $("article").toggleClass('hide');
	  $(".mobilemenu").toggleClass('hide');
	});
</script>	
<script>
	var mobMenu = document.getElementsByClassName("menu");
	mobMenu.addEventListener("click", hamBurger);
	function hamBurger() {
		var hamBurger = document.getElementsByClassName("hamburger");	
		var article = document.querySelector("article");
		var mobileMenu = document.getElementsByClassName("mobilemenu");
		hamBurger.classList.toggle('clicked');
		article.classList.toggle('hide');
		mobileMenu.classList.toggle('hide');	
	}
</script>

[PaulOB]

@codeispoetry

getElementsByClassName

getElements ByClassName is a collection of all the elements. If you just have one element with the classname you could say this.

var mobMenu = document.getElementsByClassName("menu")[0];

Or instead just use querySelector for ‘modernish’ browsers

document.querySelector(".menu");

[codeispoetry]

Sorry my bad.

[PaulOB]

@codeispoetry

I already tried that code, but still, I have the same issue

You still have this:

document.getElementsByClassName("menu");

[PaulOB]

Referring to my earlier post do you need to keep toggling all those classes to other elements?

If you were for example to add the class to the wrapper or to the body element you can control all those elements (and the hamburger) with the single class (just as I showed for the hamburger).

body.menuOpen .article{display:none}
body.menuOpen .mobileNav{display:block}
etc...

[codeispoetry]

@PaulOB Code has gone slightly far ahead than Hamburger.
Let me explain. Hamburger we are on the same page.

We are using HTML:

only hamburger/menu class will have an additional class on click:

and then the CSS:

But there is a larger picture now. There are two additives:

Part 1

Those hamburger toggling should have two more features associated. On toggling the mobile many should appear for that we need to remove hide class.

Part 2

The content/article part should either be made transparent or hidden. I am using hidden. for that class hide need to go there.

JQuery version will go like this.

$('.menu').click (function(){
  $(".hamburger").toggleClass('clicked');
  $("article").toggleClass('hide');
  $(".mobilemenu").toggleClass('hide');
});
</script>

$(“article”).toggleClass(‘hide’); will hide article content

$(“.mobilemenu”).toggleClass(‘hide’); will remove hide class and make menu visible.

[PaulOB]

@codeispoetry

But there is a larger picture now. There are two additives:

Yes that’s why I suggested you do it all with one class rather than toggling classes all over the place.

Add the clicked class to the body element then that’s all you need to do in JS. Css can handle the hiding and showing of all those things using the clicked class.

body.clicked .article{display:none;}
body.clicked .mobileNav{display:block;}
body.clicked .middle {background:transparent;}
etc....

$('.menu').click (function(){
  $("body").toggleClass('clicked');
});

[codeispoetry]

Confused! how will you modify this part:

<script>
	var mobMenu = document.querySelector(".menu");
	mobMenu.addEventListener("click", hamBurger);
	function hamBurger() {
		var hamBurger  = document.querySelector(".hamburger");	
		var article    = document.querySelector("article");
		var mobileMenu = document.querySelector(".mobilemenu");
		    hamBurger.classList.toggle('clicked');
		    article.classList.toggle('hide');
		    mobileMenu.classList.toggle('hide');	
	}
</script>

[codeispoetry]

May be like this:

<script>
	var mobMenu = document.querySelector(".menu");
	mobMenu.addEventListener("click", hamBurger);
	function hamBurger() {
		var bodySelect  = document.querySelector("body");			
		    bodySelect.classList.toggle('clicked');
	}
</script>

[PaulOB]

@codeispoetry

May be like this:

Yes much simpler :).

Maybe use const instead of var for the menu as its constant.

const mobMenu = document.querySelector(".menu");

[codeispoetry]

+

This one → Finaly worked.

body.clicked .middle {
  background: transparent;
}
body.clicked .top {
  transform: rotateZ(45deg) scaleX(1.25) translate(13px, 13px);
}
body.clicked .bottom {
  transform: rotateZ(-45deg) scaleX(1.25) translate(7px, -7px);
}
.hamburger:hover {
  cursor: pointer;
}
body.clicked .mobilemenu {
 display: block;
}
body.clicked .article {
 display: none;
}

But the menu and article ON/OFF is very fast and sharp. Not so soothing to eye.

[PaulOB]

@codeispoetry

But the menu and article ON/OFF is very fast and sharp.

It should be no different to what you had before (unless you were talking about the jquery version of hide and show).

I’d need to see a fuller demo to work out how apply a transition to the showing and hiding.