Button to Show/Hide other Controls?

Hi,

I want a button that show/hides my help instructions. On the first click it will show them on the second click it will hide them. In the Click of the button I have the following code:

    HideShowHelp();

function HideShowHelp() {
    var HelpHide;
    if (HelpHide == '1') {
        HelpHide = '0';
        $('.CSSHelp').hide();
    
    } else {
        HelpHide = '1';
        $('.CSSHelp').show();
    
    }
}

This shows the controls but doesn't hide them again. If I move the declaration of HelpHide out of the function the whole thing stops working as the Click of the button seems to only allow one line of code that's outside of a called function. What am I doing wrong?

Hiya

I am not plumsail support, but I thought i would help you out :slight_smile:

The var HelpHide is recreated everytime the button is pressed so it will not know what it was before.

For this to work, you have to state what the button will do inside the main JS window, say your button is called HideShowHelp, in the main JS window you would put:

var HelpHide = 0; 
function HideShowHelp() {
    if (HelpHide == '1') {
        HelpHide = '0';
        $('.CSSHelp').hide();
    } else {
        HelpHide = '1';
        $('.CSSHelp').show();
    }
}

fd.control('HideShowHelp').onclick = "HideShowHelp();";

Hi @Jamal_Smith-Graham,

Thanks for your response. I have never been able to get fd.control('HideShowHelp').onclick to work.

For any onclick function I have had to put it in the click of the button here:
image

I have just tried something as simple as this and the button stops doing anything:

function HideShowHelp() {
        $('.CSSHelp').show();
}

fd.spRendered(function() {
    fd.control('btnHelp').onclick = HideShowHelp();
    $('.CSSHelp').hide();
});

I don't know why onclick doesn't seem to work for me but it's not the 1st time it's caused me problems.

Hiya @NG-Helpdesk

Please try fd.control('btnHelp').onclick = "HideShowHelp();";

I have got it working using fd.control('AddItemtoChosenPOButton').onclick = "alert('hello world');";

So that should work!

Hi @Jamal_Smith-Graham,

Thanks again. Frustratingly this works:

fd.control('btnHelp').onclick = "alert('hello world');";

This Does not:

fd.control('btnHelp').onclick = "HideShowHelp();";

Something to do with it calling a function is not working. I have tried every variation of of " and ' and ; that I can think of and nothing has worked.

Mmm... Very Strange! I think we will have to leave it to @mnikitina to help us out! :slight_smile:

1 Like

Hello @Jamal_Smith-Graham, @NG-Helpdesk,

You need to define function globally to call it on button click:

var HelpHide = 0; 
window.HideShowHelp = function() {
   if (HelpHide == '1') {
       HelpHide = '0';
       $('.CSSHelp').hide();
   } else {
       HelpHide = '1';
       $('.CSSHelp').show();
   }
}

And add this in the onclick setting of the button:

HideShowHelp();
2 Likes

Hi @mnikitina,

As always this works PERFECTLY!

Can I ask if there is any documentation about why you need to use window to allow button click to call functions?

This is awesome @mnikitina thank you! :slight_smile:

@Jamal_Smith-Graham, @NG-Helpdesk,

You are welcome!

@NG-Helpdesk,

There is no documentation for this. You can either write the whole function inside the onclick setting of the button or define the function globally and access it from anywhere on the page or from the browser console.

2 Likes