Show hide CSS

Creating a Show / Hide widget button in the dashboard

Difficulty: Intermediate

Estimated Completion Time: 15 Mins

Version: 1.7+

In this topic we will show you how to use CSS and HTML to create a +/- button that will show and hide another widget in the dashboard. For optimum performance the process works by actually moving the widget off screen when the hide (-) button is pressed. When the show (+) button is pressed the widget is moved on screen. Because the widget was already loaded off screen it appears immediately and not data reload is needed. You will first need to Login to the dashboard builder to start the tutorial.

 

Step 1 – Add a Dynamic Text box widget

Add a Dynamic Text box widget using the new widget button in the bottom left hand corner of the dashboard builder. Now edit the properties using the spanner. In the Chart Template section paste the following CSS/HTML code snippet. Scroll to the bottom and press update. You can now close the dialog.

[snippet id=”2″]

Step 2 – Add the second Dynamic Text box widget

Add another Dynamic Text box widget and like in Step 1 paste the following code into the Chart Template section. Once again scroll to the bottom and press the update button. You can now close the dialog.

[snippet id=”3″]

Step 3 – Add the widget you want to show/hide

Add any other widget you like using the new widget button in the bottom left hand corner of the dashboard builder. This widget should be assigned id (#widget3) by default. This id is used in the following CSS code which needs to be added to the bottom of the CSS Style sheet property. This is located in the edit dashboard window. To access the Edit dashboard dialog press the spanner in the top right hand corner of the dashboard builder screen.

[snippet id=”4″]

That’s all done. Please enjoy your show/hide buttons! View the dashboard using the View dashboard button located in the top right section of the dashboard builder screen.

TIP:

You can get fancy by hiding multiple widgets or even changing their position on the screen when you press the show/hide buttons.

For extra information, guidance and troubleshooting consult: