DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for Custom Dropdown with HTML,CSS and JS
Mysterio
Mysterio

Posted on

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>
Enter fullscreen mode Exit fullscreen mode
p::before{
content:attr(data-category);
}
Enter fullscreen mode Exit fullscreen mode

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 value
let category = text.getAttribute("data-category");

// To set the attribute value
text.setAttribute("data-category","Full stack");
Enter fullscreen mode Exit fullscreen mode

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 style 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 - shubhmtiwri00@gmail.com

^^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

Top comments (0)

Tired of sifting through your feed?

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.