Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 29, 2022 01:17 pm GMT

Custom Dropdown with HTML,CSS and JS

Hello Everyone today i will be showing custom dropdown using HTML,CSS and Javascript. The Unique thing about this one is you have to write the javascript part once and can create multiple dropdowns with it.

Data-Attribute -

It is basically a custom HTML attribute which we can create with custom data for the elements.It is global attribute and can be accessed in both CSS and Javascript

  • How to access it in CSS - We can access data-attribute in CSS but only in ::before and ::after psuedo element
<p data-category="Web development">Web Development</p>
p::before{content:attr(data-category);}

It will fetch the content of data-category attribute and put it in the content of ::before pseudo element

  • How to access it in Javascript -
let text = document.querySelector("p");// To get the attribute valuelet category = text.getAttribute("data-category");// To set the attribute valuetext.setAttribute("data-category","Full stack");

Here's the codepen for the demo -

Brief description -

  • Basically i have created a template in html for the dropdown where there is a button and the links container side by side.
  • The button has data-dropdown-id and links container has data-content-id,Both should be same , you can check that in the codepen above.
  • Then i am accessing the buttons and the links wrapper in javascript using their data-attributes.
  • After that i am using foreach loop on the buttons and attaching an event listener to all buttons
  • Inside the event listener of each button,i am using foreach loop on the links containers,and checking whether the button data-dropdown-id value is equal to links container data-content-id value,in the else part , i have set all the other links container data-dropdown value to false, what it will do is close all the other dropdowns and only open the one which matches the condition.
  • If it matches both the values, then check for that particular links container another attribute called data-dropdown which has a boolean value of true/false which i am using to toggle the dropdown.
  • For the links part, you have to wrap the links in a container having class "dropdown-content", i am using this classname to toggle the display value of the container, so put this class in the links container ,then it will work.
  • You can also styling the dropdown button and links sections separately.

Thank you for checking this Post

NOTE - I am struggling with writing good quality codes , so if you have any corrections or suggestion for the code , please mention that in the comment section , it will be helpful for me

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - [email protected]

^^You can help me by some donation at the link below Thank you ^^
--> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90


Original Link: https://dev.to/shubhamtiwari909/custom-dropdown-with-htmlcss-and-js-20oc

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To