Make a dropdown to show with click instead of hover-CodePudding

I am trying to add a function onclick for my dropdown menu, so instead of showing when I hover, I want it to show when I click on it, do you know what can I do?

My dropdown is on the grid icon next to "Images"

This is my repo so you can view my code: https://github.com/Diefonro/HTML-CSS

You can also see the page displayed right now at: https://diefonro.github.io/HTML-CSS

Thank you

CodePudding user response：

you have to implement the below function and call it on the onclick event. and as @Tom suggested you need to get rid of the below part also from the style sheet

.dd-cont:hover .drop-d {
   display: block;
}

this is how we catch specific element which has particular class and we can change styles of the elements like below

function clickDD() {
    const dropdown = document.querySelector('.drop-d');
  dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}

here is a working example(jsFiddle) from your code

ps I did not included any assets to the fiddle

CodePudding user response：

To handle the click event, you can take a look at EventListener or onclick attribute.

The dropdown is shown on hover because of this CSS rule :

.dd-cont:hover .drop-d {
   display: block;
}