Collapse back every other show/hide

Hi there,

/!\ Pre-requisite : JQuery

I developped this cool little piece of code with the help of Leo and Youcef.
It can be annoying to click again on a show/hide button to have to hide the current box, especially when you have multiple buttons opening multiple boxes.

So we came up with this custom code to re-hide all the other boxes when you click on a show/hide (goes in the javascript section):

jQuery(’.ii-grid-item-button-show-hide’,window.parent.document).on( “click”, function() {
var currentParentId = jQuery(this).find(‘div[parentid]’).attr(‘parentid’)
var arraytog = jQuery(".ii-grid-item-button-show-hide div[parentid]",window.parent.document);
Object.values(arraytog).forEach(tog => {
if (jQuery(tog)[0].vue !== ‘undefined’){
if (jQuery(tog)[0] !== ‘undefined’){
if (jQuery(tog)[0] && jQuery(jQuery(tog)[0]).attr(‘parentid’) !== currentParentId){

The code is prety much self-explanatory but here’s what it does (just in case :wink: ) :
On click of a button show/hide :
get the parentid (id of the box that will be showed) of the element you clicked on.
get the list of all show/hide buttons
For Each element in that list :
if it has a vue attribute and a “active” attribute :
if the “active” attribute is true (show) and the element is not the box I clicked on :
use the toggleStateShowHide function on the element.

the toggleStateShowHide function is the function used by the show/hide button.

For people who can’t figure out what i’m talking about :

Consider this studio :

when you open it :

Click on the blue button :

Click on the red button :

(I didn’t have to re-click on the blue button to hide the blue box :open_mouth: :exploding_head:)

Hey, By the way, make sure you put the custom code at the very end of your dashboard, otherwise it won’t work 100% of the time