@ABojo
Posted
The project looks awesome, and you did a great job. I’ll try my best to help you with the dropdown issue you’re having.
First, you want to give the dropdown buttons a position of relative. If you do that, each dropdown box will be positioned according to its parent dropdown button.
You’d want each dropdown button to have the relative class like this:
<li class="relative gap-1 flex justify-between items-center">
Second, clicking any dropdown button will cause all of the dropdowns to be toggled at the same time, but you want each dropdown to be toggled separately. I looked at your code and each dropdown box is being toggled by the same piece of state. I would make a dropdown component, so each instance will have its own isOpen state, and that way only the correct dropdown will be opened.
Also, it’s important to use a button element for your dropdown buttons because they come with important accessibility features included.
If you need any more help, let me know!
Marked as helpful
@Ausranking
Posted
@ABojo thanks for reaching out to me , believe me , this means a lot to my journey. However, I'd love to ask you to make a pull request which contains exactly what you explained in your text, by doing so, I'll visualize my mistakes then take corrections. Thanks so much, I am waiting!
