Hide a widget on click of a link

[maryc]

Hi,

How do I hide and show a widget on click of a link in the header?

Thanks

[Community Alums]

If this was a broad example of your widget container HTML

// HTML Template

<div id="mywidgetcontainer">
  <p>Hello World</p>
</div>

You could modify it like so to hide it with a button press

//Pretend this is your link in your header
<button onclick="c.data.toggleWidget()">Hide/show</button>

// HTML Template

<div ng-if="c.data.showWidget" id="myWidgetContainer">
  <p>Hello World</p>
</div>

// Client Script

c.data.showWidget = true;

c.data.toggleWidget = function(){
  if(c.data.showWidget){
    c.data.showWidget = false;
  }else{
    c.data.showWidget = true;
  }
};

[Barrilito van D]

Hi maryc,

Your question can be read in two ways. In the answer of Aidan an example is given if the widget and the header is one and the same. If your question is about having a separate link in the header and you want to use that to show / hide a widget elsewhere on the page, you should use broadcast events / event listeners.  In general that means doing two things:

- In the header broadcast an event when the link is clicked

- In the widget to show or hide listen to the specific broadcast event and act on it when received (meaning show or hide the widget or a part of the widgets content)

This is the basic though to do it in the most simple way. An example of working with events / broadcast can be found everywhere, here is one for example.

Good luck!

If you think my answer put you in the right direction or you appreciated my effort, please mark the response as Helpful (👍). That way other people in the community will probably be triggered to read the responses too. If my answer solved your issue, please mark my response as Correct (✅). In the list of question people like me that want to help out will know your question was already answered and others that are curious to the answer know a good answer is given in the thread.
Thanks in advance! Good luck!