Hide/Toggle Recent Events (Custom Script)

Extensibility
1

Hello.

Edit: Please see Ians code below which achieves the same result although sometimes fails to trigger - a setTimeout may help :slight_smile:

I Wasn’t sure where to post this so thought I’d add it here

I wanted the ability to be able to hide/toggle the recent events to view them as required and here is the script you can use if you would like to achieve the same:

//Toggle System Events
window.onload = systemevents;
function systemevents() {
   $("#tblSystemEvents").hide();
}
$("#systemEventsContainer").each(function(){
     $("#systemEventsContainer").click(function () {
           $("#tblSystemEvents").toggle()
     });
});

You can simply click on the Recent Events “Table” to show it/hide it as required.

Might help someone else :slight_smile:

2

Thanks for sharing @Oggie! :slight_smile:

3

Nice, though I’d use the jQuery document-ready callback rather than the ancient window.onload:

jQuery(function($) {
  $("#tblSystemEvents").hide();
  $("#systemEventsContainer").on("click", function () {
     $("#tblSystemEvents").toggle();
  });
});
4

Thanks @ian_roberts

Certainly a cleaner and more efficient way to achieve the same result thanks for the tweak!

Although I have noticed it sometimes fails to trigger - a setTimeout may help:

jQuery(document).ready(function() {
setTimeout(function() {
  $("#tblSystemEvents").hide();
      }, 500);
 $("#systemEventsContainer").on("click", function () {
 $("#tblSystemEvents").toggle();
  });
});
5

Hmm, yeah, a safer approach would probably be to add some custom CSS like this to hide the table by default:

#tblSystemEvents {
  display: none;
}

#tblSystemEvents.qfShow {
  display: table;
}

Then in the JS all you have to do is toggle the class:

jQuery(function($) {
  $("#systemEventsContainer").on("click", function() {
    $("#tblSystemEvents").toggleClass("qfShow");
  });
});