Hi ,
I have list of accordions and under each accordion there is a list of items . I am using below code to keep list items highlighted on click ,
and below is widget hierarchy ,
Problem: Its highlighting only first 2 list items of first 2 accordions .Highlighting is not working for other list items of first 2 accordions and not able to highlight even single list item other than first two accordions.
Any resolutions are appreciated .
Thanks,
Santosh
This scenario is working after using same script on "Initialized " handler of accordion .I am yet need to check whether the JavaScript event will be registered along with each list number of accordions.
Rather than registering new click event I am using ListItem1 click event. It is more easy and clean implementation. Please check
Another solution without javascript using only css and click event
Hi Santosh,
Are you trying to highlight only one item per list or multiple item per list?
One item at a time from all accordions .
Hi, an alternative for you is to create a local variable called SelectedId of type Entity.Id.
Create a Client Action with an input parameter for SelectedId with type Entity.Id and assign that to the OnClick event of the ListItem.
In this action assign the value of the input parameter to the local variable.
Then in the attributes of the ListItem add dynamic styling based on the SelectedId.
Also make sure to add !important to your CSS class for the property you want to override.
Hi Melencu,
Thanks for suggestion but I think this solution always requires unique reference for each list row . And it will not work for duplicate record reference .
Are you able to check that class is added to the element or not use chrome developer tool to check?
can you share you oml ? or test page link where I can check html and js ?
Hi Navneet ,
No, class is not being added to other list items than first two . Also in script I am able to get only 2 accordion objects with 2 list items each .
it means your selector is not working properly. I will check oml and let you know.
Please find OML for reference,
Hi @Santosh Chanveer ,
I usually achieve this without JavaScript by using a variable to check if the item is selected and adding a new class to the list: If(IsSelected, "highlighted-item", "").
However, if your accordion is inside a web block that is inside a screen, the CSS may be overridden by the screen’s CSS. If that’s the case, you would need to apply the styling at the screen level.
Regards,
Tami
Hi Tami,
Can you suggest how to remove previously selected list item highlighting using variable . Are you referring to use extra attribute called is-highlighted to each list item and on selection of one list item , we can update that value for other list items ?
Yes! You can use an additional attribute (like is-highlighted) to track the selection state for each item and update it when a new item is selected. Then, you can apply the CSS to the selected items by using a class.
Can you check this post,
https://www.outsystems.com/forums/discussion/80314/reactive-accordion-avoid-expand-and-collapse-on-specific-area-inside-a-list/
Thanks
Sudha Narayanan