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].vue.active !== ‘undefined’){
if (jQuery(tog)[0].vue.active && jQuery(jQuery(tog)[0]).attr(‘parentid’) !== currentParentId){
jQuery(tog,window.parent.document)[0].vue.toggleStateShowHide()
};
};
};
});
});
The code is prety much self-explanatory but here’s what it does (just in case 
) :
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 
)