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