Click to hide not giving a clean result

Ask the community
,
1

I’m having some trouble with a click to show function. When I click the button slides off but then shows up for a split second (see clip). Am I missing something with my code/is there a better way of achieving this?

Here is the code -

let fadeOptions = {
“duration” : 200 ,
};

let slideOption = {
“duration” : 600 ,
“direction” : ‘left’
};

export function servicesB_click ( event ) {
$w ( ‘#servicesB’ ). hide ( “slide” , slideOption );
$w ( ‘#servicesList’ ). show ( “slide” , slideOption );
}

export function servicesList_mouseOut ( event ) {
$w ( ‘#servicesList’ ). hide ( “slide” , slideOption );
$w ( ‘#servicesB’ ). show ( “fade” , fadeOptions );
}

2

Is there any hover effect? It seems like when you hover, it is showing the button. Try pressing the button and taking the pointer of the button location to test.

3

I’ve got a click to show for the services list then when the user moves the cursor off the green container the button should appear back on. The problem is the reappearance of the button on the first click before it quickly goes off

4

@danfleming so there is the answer, a hidden element it is still hoverable, when you hover the show button, it is moving of the green container, that is why it is flicking. You should check for the state change, like, if the button was clicked, the hover should be disabled.

5

@bwprado Thanks for your suggestion, will try later