Show / Hide Spotfire Controls from Checkbox Filter (7.5+)

html

<STYLE> 
.regionSettings{
float:left;
width:200px;
margin:10px;
padding: 5px;
border:2px solid gray;
background:whitesmoke;

}
</STYLE>


<DIV id="checkboxfilter">
   <SpotfireControl id="26042a6ce602404c9b74e67e0170f3a5" />
</DIV>

<hr/>

<DIV id=AfricaControls class=regionSettings >
  <H2>Africa</H2>Selected: 
  <SpotfireControl id="542f...20" />
  <BR><BR>
  Length: <SpotfireControl id="9fc00...04" />
</DIV>

<DIV id=AmericasControls class=regionSettings >
   <H2>Americas</H2>
   <SpotfireControl id="2bcd...8e" />
</DIV>

<DIV id=AsiaControls class=regionSettings >
   <H2>Asia</H2>
   <SpotfireControl id="75c2a...cc" />
</DIV>

<DIV id=EuropeControls class=regionSettings >
   <H2>Europe</H2>
   <SpotfireControl id="d113...8d" /> 
</DIV>

javascript

$('#checkboxfilter').on("click",'svg',function() { 

label=$(this).parents().eq(2).text() //returns selected checkbox name

isChecked=!/unchecked/.test($(this).parents().eq(1).html())

ctrl = "#"+label+"Controls"

isChecked?$(ctrl).show():$(ctrl).hide()

});