Hide <div> from button click in widget

[ServiceNow_Use2]

Hi,

I am making a widget that has a div section containing content, and an input of type button:

<div id="main">
</div>

<div>
<input type="button" ng-click="myFunction()" value="Hide Content">
</div>

I am trying to hide the 'main' div element inclusive of content when the button is clicked.  I have tried the following code in the Client Script section of the widget: 

function myFunction() {
    document.getElementById('main').style.display = ' ';

}

and also:

function myFunction() {
    g_form.setVisible('main',false);

}

with no luck.  Is there a way to hide the 'main' div element from the button click? I feel like I have not found the proper code syntax or maybe the location of my code (Client Script) is in the wrong place? Any help would be greatly appreciated.

[DScroggins]

You can use ng-if to show/ hide the main div element. Something like the below will work:

HTML

<div id="main" ng-if="c.showMain">
</div>

<div>
<input type="button" ng-click="c.myFunction()" value="Hide Content">
</div>

Client Script

c.showMain = true;

c.myFunction = function(){

    c.showMain = !c.showMain;

}

[ServiceNow_Use2]

Hi,

I have done as suggested, and I got it to work! However, i had other code in my client script function that now does not work.  Do i need to move my other code somewhere else for it to work?

Client Script: 

function() {
/* widget controller */
var c = this;

c.showMain = true;    /* works */

c.myFunction = function() {     /* works */
c.showMain = false;
}

/* no longer works */ 
$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
});

}

The code that no longer works just allows checkboxes on the form to only have one selected at a time if their name is the same.  This is important functionality for what I need....do you see a way for my code to work again?

[ServiceNow_Use2]

Never mind, I figured it out. Thanks for the help! 

[DScroggins]

Glad that you got it working 🙂