Adding Accordion to Choices

[suyash]

HI there ... I am new to prodigy and working on Custom recipes and Custom interfaces.
I have a Json File with the following structure for labels.

{
    "A": [
        {
            "id": "A1",
            "text": "Choice1"
        },
        {
            "id": "A2",
            "text": "Choice2"
        },
        {
            "id": "A3",
            "text": "Choice3"
        }
    ],
    "B": [
        {
            "id": "B1",
            "text": "Choice4"
        },
        {
            "id": "B2",
            "text": "Choice5"
        },
        {
            "id": "B3",
            "text": "Choice6"
        },
        {
            "id": "B4",
            "text": "Choice7"
        },
        {
            "id": "B5",
            "text": "Choice8"
        }
    ],

Now I am able to display the Second level data as choices . But I have 100's of choices and i have shown only 8 of them.
It would be very helpful to add categorisation to such long number of choices. instead of going through all the 100 choices.
Would it be possible to add an accordion in the custom script.
where I would click on Button "A" (refer above structure)

and It would display the 3 choices present in it and I can select from it.

 [
        {
            "id": "A1",
            "text": "Choice1"
        },
        {
            "id": "A2",
            "text": "Choice2"
        },
        {
            "id": "A3",
            "text": "Choice3"
        }
    ],

Thanks

[ines (Ines Montani)]

Hi! There's currently no out-of-the-box feature like this, but you should be able to build something like this using custom HTML and JavaScript. For example, you could set it up like this:

• HTML template with checkboxes for all the options
• JavaScript onclick handlers on all checkboxes that update the JSON task if the checkbox was selected/unselected (you'd just have to decide how you want to store the data about the selected options – you could have a list, or just add a key like "B1": true)
• function that shows/hides the additional questions when you click on a button or select a checkbox – e.g. by toggling section.style.display = 'none' on the section. Or you could use the <details> element, which gives you an accordion out-of-the-box

This thread also asked a similar question and I shared some links and ideas in the comments:

Grouping text categorization choices in custom recipe

Hi! There are different ways you could do this at the moment: one would be to use multiple blocks with a choice UI, and add the different "options" to each block. You could also combine all options into one and use custom CSS or the label names to indicate the grouping. The only downside is that in all cases, the options would write to the same underlying "accept" key, so you need to allow multiple selection, and you couldn't easily indicate relationships within the grouping (like, only allow o…

[suyash]

Hi Ines , I was able to demonstrate as per your suggestion.
Thanks a lot for your help.