On my webpage i have a list with customer info, i want to filter this list via dropdown's this part all works fine. But when i have multiple dropdown's and i have one opened and i want to open another one the first dropdown stays open, this dropdown needs to close when i click anywhere else. Now i understand why this happens i just don't know how to this another way. In the screenshot below you can see they are both open but one needs to close as soon as you open another.
Jquery is not an option for me.
I'm using the javascript from this w3schools howto page:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown
// Close the dropdown if the user clicks outside of itwindow.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } }}
Hi Daan,
Try the one that I send in attach.
Hope it helps you.
Best Regards,
Nuno R
Just a quick observation: it seems as if you use different dropdown widgets.
This could mean the css classes work different for either dropdown. Did you check inspector in the browser?
I created my own dropdown's. They both have the same css classes. The problem is:(!event.target.matches('.dropbtn'))
.dropbtn is the topdiv for both of them so it wont close. i'm looking for a different approach.
Hello Daan,
I have a solution, that you can see it working here:
https://personal-xchr.outsystemscloud.com/crowdfund/Homepage?_ts=637558056316622667
I create a block that use a javascript file, that you can inspect to see it.
Hope it helps.
I change the link with this one:
https://personal-xchr.outsystemscloud.com/DropdownTests/Homepage?_ts=637562361747642381
Hi, Sorry for the late reply. The link you sent is not working, can you please update it to the correct link?
Thanks a lot!
Sorry for the late replay also. I change the link and forgot to told you, the new one:
https://personal-xchr.outsystemscloud.com/Tests/Dropdown
Hi, would you be so kind to share the oml with me ?
Thank you!
See in attach the OML with the solution.
Hi,
This looks very good. The only problem left is when I click on "show items" when the dropdown is already open it is supposed to close but that is not working yet. I hope this is easy to fix. Do you know the best way to do this?
Dear Nuno
Great Work! @Daan v I hope this has helped and you are able to use same in your Project.
Please feel free to ask if you have any doubts.
Dear @Manish Gupta,Thanks.
I hope it helps @Daan v.
Hope So, would be great if Daan can confirm else we will look into some other solution for him.
I send a message to @Daan v but he don't answer me
My apologies for the late reply. I have been making changes to the dropdowns to fit my purpose and they have been working perfectly! Thanks a lot.
One more thing left to do is adding an INPUT so that i can use it to search in the dropdown. I think this will give problems because the dropdown is supposed to close when you click everywhere. I will try and figure this out myself and if i cannot get it to work i will try and contact @Nuno Rodrigues or @Manish Gupta.
I posted a screenshot below. This is how the dropdown looks right now :)
Thanks a lot for the help you guys have given me! :)
Your Welcome Daan V. :)
Hello @Daan v,
Thanks for the reply.
If you need something send me a message.
Hello Daan
Can you share the URL for your personal environment with Anonymous access or share the OML? I will correct it for you.
Hi i did what you asked for:Hope it works and thanks in advance
Hii Daan V
Thanks for sharing the OML. I have installed and run the application here: https://personal-9qwkrkgl.outsystemscloud.com/dropdownwithJS/dropdowns?_ts=637566045408365564
So, as I can see when we open 1st Dropdown and click anywhere in window it get closed except from Dropdown 2.
Do you want the Dropdown 1 gets closed if someone clicks on Dropdown 2?
Please confirm
Hi Manish Gupta,
Yes, that is exactly what i need and the other way around.
Please Check, it is done - https://personal-9qwkrkgl.outsystemscloud.com/dropdownwithJS/dropdowns?_ts=637566062101959219
Please let me know if it is fine.
You just have need to change the Class of 2nd Dropdown. Please look into the code you have used to close the Dropdown -
// Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }
In the If Condition you are saying to close the dropdown if the target class of not .dropbtn
And you have given the same class to 2nd dropdown which fails the if condition and dropdown remains open.
Please change the class name for 2nd dropdown and add same properties for that class. You can use .dropbtn2
I hope it is clear and solved your problem.
Thanks a lot for giving this a try, but i'm afraid this will not solve my problem since i won't be able to reuse multiple of the same dropdown in one page.
Do you know any other fix?
Yes, for that we will need to use the different approach of closing the dropdown. Let me prepare the app for you.
Please give me a few minutes.
@Daan v
I have one more solution. Please look into the below one -
First, we’ll listen for a special event called toggle on the .my-nav (Replace with the field class) navigation. This event fires on a <details> element when it’s opened or closed.
toggle
.my-nav (Replace with the field class)
<details>
This event doesn’t bubble, so you’ll need to set useCapture to true.
useCapture
true
var nav = document.querySelector('.my-nav'); nav.addEventListener('toggle', function (event) { // Do stuff... }, true);
If the clicked element isn’t open, we’ll do nothing.
open
Otherwise, we’ll get all of the open dropdowns in our nav element, and close them by removing the [open] attribute. We’ll check that the item isn’t the one we just opened first, though.
nav
[open]
var nav = document.querySelector('.my-nav'); nav.addEventListener('toggle', function (event) { // Only run if the dropdown is open if (!event.target.open) return; // Get all other open dropdowns and close them var dropdowns = nav.querySelectorAll('.dropdown[open]'); Array.prototype.forEach.call(dropdowns, function (dropdown) { if (dropdown === event.target) return; dropdown.removeAttribute('open'); }); }, true);
And that’s it!
Let me know if you can apply this one in application or do you need me to build sample OML for you?
This looks promising.
I'm not that great with JS if you have an oml that I can download I would be thankfull
Thanks,
Daan
Okay, I will share the working one by tonight. Just occupied in something at the moment. I hope that will not be too delay for you...
Many thanks in advance
No rush!!
Thanks a lot I will wait patiently :D