[Geschlossen] Using JS to show hide search field options when label is clicked.

[Author]

Artikel

[OliverJ8211]

I have a view on: versteckter Link

I'm using JS to show/hide the field options when a user clicks on the label for the field.

function toggle_visibility(id, symbolId) {
var e = document.getElementById(id);
var symbol = document.getElementById(symbolId);

if (e.style.display === 'block') {
e.style.display = 'none';
symbol.innerText = '+';
} else {
e.style.display = 'block';
symbol.innerText = '-';
}
}

The issue only happens if I have "Show only available options for each input" checked in the view edit options.

I've tried adding an event listener to stopPropagation, and storing the options in sessionStorage, but none of it is working.

So the updating of the choices is the cause.

Any help is appreciated. Thank You.

[Christopher Amirian]

Hi,

I did not understand what is the issue in the first place. I checked the website, it seems to be working ok.

Please give me detailed steps I should take to see the problem to understand.

Thanks.

[OliverJ8211]

My apologies. A couple of sentences seem to be missing from my initial question.

The JS code opens the field options when the label is clicked. That works. But since I have "Show only available options for each input" once the user makes a selection the options close, when they should remain open.

To recreate.

Go to: versteckter Link
Click on "Room Types +" then make a selection like "Private Room".
After you've selected Private Room the field options close, when they should remain open until the field label "Room Types -" is clicked again.

Thank You and let me know if you need more info.

[Christopher Amirian]

Hi,

Now I understand. It is not possible to change that as you use the Ajax loading functionality. The Ajax code replaces the whole HTML code with a new set of data, that is why your code will not work when the new set of data will be replaced.

It will be a long Custom Javascript code, to store the current state of the labels (which one is expanded and which one is collapsed) and attach the code to AjaxComplete jQuery event which triggers when the Ajax loading is finished.

Then it needs to traverse all the labels and set the correct state to the label.

This is way outside of our support scope and you are welcome to hire a developer to do that for you:

https://toolset.com/contractors/

Thanks.