Collapsible Repeater Issue

Ask the community
,
1

Hi there!

Due to accessibility issues with the Wix FAQ widget. I had to fashion this element on my own from scratch. I found a code online that enables collapsing containers inside a repeater.

The only problem is that the user has to click twice on the arrow button in order for it to open and expand.

I’m using Editor X. Here is the link to the site:
https://www.sf-law.co.il/faq-1

And here is the code

$w . onReady ( function () {
$w ( ‘#collapsedelement’ ). collapse ();
$w ( ‘#closebtn’ ). hide ();
});

export function openbtn_click ( event ) {
let $item = $w . at ( event . context );

if  ( $item ( "#collapsedelement" ). collapsed ) { 
    $item ( "#collapsedelement" ). expand (); 
    $item ( '#openbtn' ). hide (); 
    $item ( '#closebtn' ). show (); 

}  **else**  { 
    $item ( "#collapsedelement" ). collapse (); 
    $item ( '#openbtn' ). show (); 
    $item ( '#closebtn' ). hide (); 
}

}

export function closebtn_click ( event ) {
let $item = $w . at ( event . context );

if  ( $item ( "#collapsedelement" ). collapsed ) { 
    $item ( "#collapsedelement" ). expand (); 
    $item ( '#openbtn' ). hide (); 
    $item ( '#closebtn' ). show (); 

}  **else**  { 
    $item ( "#collapsedelement" ). collapse (); 
    $item ( '#openbtn' ). show (); 
    $item ( '#closebtn' ). hide (); 
}

}

Any idea how to solve this?

Thanks
Tal

2

When I’m testing it it’s working as intended (one click makes it open, a second makes it close again).

Code also looks correct. Are you experiencing this issue on the live site or in preview?

3

Hi

Thanks for answering.
It happens only in the live site. In preview mode it seems to be working fine (although the buttons do not disappear).

I’ve tested it on different computers and browsers, and they all seem to have this issue.

4

Well, first of all → get rid of that shitty → export-functions inside your code!
Change your coding style, it will save you some headaches in future!

Instead go this coding style…

$w.onReady(function () {
    $w('#collapsedelement').collapse();
    $w('#closebtn').hide();

    $w('#openbtn').onClick((event)=>{console.log(event.target.id+"-clicked!");
        let $item = $w.at(event.context); 
        if ($item("#collapsedelement").collapsed) {
            $item("#collapsedelement").expand(); $item("#collapsedelement").show('fade');
            $item('#openbtn').hide(); $item('#openbtn').collapse();
            $item('#closebtn').expand(); $item('#closebtn').show('fade');
        } else {
            $item("#collapsedelement").collapse();
            $item('#openbtn').show();
            $item('#closebtn').hide();
        }
    });

    $w('#closebtn').onClick((event)=>{console.log(event.target.id+"-clicked!");
        let $item = $w.at(event.context); 
        if ($item("#collapsedelement").collapsed) {
            $item("#collapsedelement").expand(); $item("#collapsedelement").show('fade');
            $item('#openbtn').hide(); $item('#openbtn').collapse();
            $item('#closebtn').expand(); $item('#closebtn').show('fade');
        } else {
            $item("#collapsedelement").hide(); $item("#collapsedelement").collapse();
            $item('#openbtn')expand(); $item('#openbtn').show('fade');
            $item('#closebtn').hide(); $item('#closebtn').collapse();
        }
    });
});

When working with → show() and hide(), also use → collapse and expand(), of course vice versa!

Surely you have some more code on your page, which could interrupt and give you the described error.

5

@russian-dima Thanks.

I’ve replaced the code with your code, and the problem is still occurring.
I have no other code in the page. This is the only code there.

I’ve did some testing.
I’ve copied the elements to a different editor x site, and it had the same problem, but when I copied it to the classic Wix editor, the problem was gone!

Does anyone know what could cause this issue? Is it a bug? Can someone at Wix help me?

Thanks

6

@tal18574
Navigate your request to Wix-Customer-Care.
I did not test the issue, maybe a bug.

It’'s strange that it is working well on normal EDITOR, but is buggy on EDITOR-X.