How does the mechanics of an HTML hamburger toggle works30.11.22

How does the mechanics of an html hamburger toggle works

there are lots pseudo-classes in css that can help us style elements in different states. For example, you can style a button when its hovered, active, focused, etc.

One pseudo-class you might not have heard about, though, is the : target pseudo-class.

The : target pseudo-class is used to select an element when that elements id matches part of the current url.
When would an elements id match a url?

A common use case for having an elements id show up in the url is if youre using an anchor tag (<a>) to jump to a specific spot on the current page. For example, if its your personal website, you might have a contact button at the top of the page. On click, it could bring the user to the footer to see all your contact information.
Using an anchor tag to jump positions on the page

if youve used an <a> tag before, youre likely familiar with the href attribute. If youre trying to link to a website, like alligator. Io for example, youd create the link in your html like this:

<a href='https: //alligator. Io'>
click me!
</a>

however, if you want your user to stay on the current page and jump down to the footer, for example, all you have to do is set an id on the footer and use that id for the href value in the <a> tag.

<a href='#footer'>
go to the footer!
</a>

when the user clicks on this footer link, the page will jump to the footer and their current url will get updated to look like:

https: //www. Imawebsite. Com/#footer

the footer elements id is now part of the current url. In other words, its the target!
Creating click handlers with : target

now that we know how to create a target with html, how do we use that target to create a click handler without any javascript? Thankfully, it takes just a little css!

Using our see more! Button example from above, lets start by creating a link to see more text:

our section of text we want to see doesnt exist yet, so lets create that too.

<section id='seemore'>
<p>
here's some more info that you couldn't see before. I can only be seen after you click the "see more! " button.
</p>
</section>

when you click the see more! Button, the url will update to look like this:

https: //www. Imawebsite. Com/#seemore

the problem we have now is that the #seemore section is visible to the user even though its not supposed to be yet!

Since this is all the html we'l need so far, lets add our css to manage showing the text block on click.

First, lets hide the text that shouldnt show yet.

now the text in the #seemore section doesnt show on load or when you click the see more! Button. This is where the : target styling comes in. Lets use the : target pseudo-class to update the styling when the see more! Button gets clicked.

#seemore: target {
display: block;
}
</style>

button getting clicked to show more text

it is literally as simple as that! On load, our text section will not show. As soon as you click the see more! Button, it will add #seemore to the url and the #seemore section becomes the target. Once #seemore becomes the target, it will have its : target styling applied, which displays the text.
Using : target to toggle the display

if an element wasnt visible to begin with, you will probably want the option to hide it again.

Luckily, we can do that with just one more line of html (no css! )

using the same example as above, lets expand the html to include a hide text button.

<section id='seemore'>
<p>
here's some more info that you couldn't see before. I can only be seen after you click the "see more! " button.
</p>

notice that theres a new <a> tag in the text section. Since its in the element that only shows when the user clicks see more! , the hide text button will only show if the hidden text becomes visible. That is, the user doesnt need to see the button to hide text unless theres text to hide.

The href value on the hide text button is #. This is because we want to update the url to no longer include #seemore. When the hide text button is clicked, it will update the url to look like this:

https: //www. Imawebsite. Com/#

with the url updated, #seemore is no longer the target, and the #seemore: target styling no longer gets applied. The block of text (including the hide text button) will, therefore, go back to having the display: none; styling applied.

In short, update the url and the text that was originally not displayed goes back to not being displayed. We officially have a way to toggle the text!

https://www.digitalocean.com/community/tutorials/css-css-only-click-handler

Anonymous

How does the mechanics of an HTML hamburger toggle works30.11.22

Information Epoch 1732467047