AccordionItem open/close state
Question
I have an Accordion with several AccordionItems in it - AND - I need to be able to test to see if a given AccordionItem is open or closed.

I could do this in a screen action or in some custom JS code - either way.
BUT, I know that I can call the "click()" method - but - how can I tell of the accordion item is already open ?

Thanks!

Hi Bruce.

You can validate that using a jQuery selector to check if it's open or not.

Meaning, if for instance the only think that changes is the css attribute display, you can get the display value and if is display:none if should be closed. 

Here's an example:

if ( $('<your element or css class>').css('display') == 'none' )  ---> The element is closed, else is open.

If you're using the Accordion given ny the SilkUI, the only difference is that a class called expanded is added to the element. So for this scenario you can use a selector like:

if ( $('<your element or css class>' ).hasClass( 'expanded' ) )  ---> The element is open, else is closed.

According to the value, you can do what you need/want.

Hope it helps.

Could I use this to add aria tags aria-expanded="true" and aria-expanded="false" to the accordion somehow?


Gonçalo Martins wrote:

Hi Bruce.

You can validate that using a jQuery selector to check if it's open or not.

Meaning, if for instance the only think that changes is the css attribute display, you can get the display value and if is display:none if should be closed. 

Here's an example:

if ( $('<your element or css class>').css('display') == 'none' )  ---> The element is closed, else is open.

If you're using the Accordion given ny the SilkUI, the only difference is that a class called expanded is added to the element. So for this scenario you can use a selector like:

if ( $('<your element or css class>' ).hasClass( 'expanded' ) )  ---> The element is open, else is closed.

According to the value, you can do what you need/want.

Hope it helps.



Keith Matthews wrote:

OK my problem is resolved with some Javascript on a copy of the  AccordionItem silkUI pattern.

Could I use this to add aria tags aria-expanded="true" and aria-expanded="false" to the accordion somehow?


Gonçalo Martins wrote:

Hi Bruce.

You can validate that using a jQuery selector to check if it's open or not.

Meaning, if for instance the only think that changes is the css attribute display, you can get the display value and if is display:none if should be closed. 

Here's an example:

if ( $('<your element or css class>').css('display') == 'none' )  ---> The element is closed, else is open.

If you're using the Accordion given ny the SilkUI, the only difference is that a class called expanded is added to the element. So for this scenario you can use a selector like:

if ( $('<your element or css class>' ).hasClass( 'expanded' ) )  ---> The element is open, else is closed.

According to the value, you can do what you need/want.

Hope it helps.





Thanks for the info - I will try that next time. As it turns out, I already changed the Accordion widget to instead use the SectionExpandable and then updated the CSS to move the carrot to the let so it looks like an Accordion.

So, next time I have an Accordion I will give this a try thanks!

I have noticed, that this post is a little ancient, but there is still no easy method to gather the AccordionItem-OpenState in a server process. Therefore, here is my solution. It took quite some time to make this (not very beautiful) workaround.

1. Name the AccordionItem <AccordionItemName>

1. Add a input (e.g. Checkbox, Text Input, ...) to your Screen and give it a name <InputName> (here: cbHasSRBRequest)

2. Create a local variable and link it to the input

3. (Create a Submit-Button and) Add onclick to the Extended Properties of your Submit-Button

4. Add the following code:

"document.getElementById('" + <InputName>.Id + "').checked = document.getElementById('" + <AccordionItemName>.Id + "').children[0].getAttribute('aria-expanded') == 'true';"

5. Now you can use the local variable in your Screen Action (assigned to your Submit-Button)

---

Thanks for the hints from Gonçalo Martins. Without the introduction, I would not have been able to provide this a little bit more detailed solution.

He proposed to use jQuery, of course that should work as well. Personally, I haven't tried neither the .css-Attribute nor the 'expanded'-Class-Attribute.

Hope, this might help someone to not waste one and a half days on this, like me :)

And if my solution is garbage and I should use another, easier method: Please tell me! I'd be grateful!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.