title: How to resize spotfire text area dynamically
body: <p>Filters in text area is consuming space even if I hide filters. I want to hide entire text area so that I have more space for my visualisations.</p>
  
  <p>Text area should be dynamic that if user wants any filters there should be toggle button which helps to open filters and if they don't want then text area should be hidden </p>
  
  <pre><code>   &lt;SpotfireControl id="c970da0f1b5549a88d27f368f6770f2f" /&gt;
  &lt;DIV id="showHidecontainer"&gt;
  &lt;TABLE style="WIDTH: 550.5pt" cellSpacing=0 cellPadding=0 width=751 border=0&gt; 
  &lt;COLGROUP&gt; 
  &lt;COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157&gt; 
  &lt;COL style="WIDTH: 21.5pt; mso-width-source: userset; mso-width-alt: 1133" width=31&gt; 
  &lt;COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157&gt; 
  &lt;COL style="WIDTH: 21.5pt; mso-width-source: userset; mso-width-alt: 1133" width=31&gt; 
  &lt;COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157&gt; 
  &lt;COL style="WIDTH: 21.5pt; mso-width-source: userset; mso-width-alt: 1133" width=31&gt; 
  &lt;COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157&gt; 
  &lt;TBODY&gt; 
  &lt;TR style="HEIGHT: 15.75pt" height=21&gt; 
  &lt;TD class=xl65 style="BORDER-TOP: windowtext 1.5pt solid; BORDER-RIGHT: windowtext 1.5pt solid; WIDTH: 240pt; BORDER-BOTTOM: windowtext 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: #3166ff" width=157&gt; 
  &lt;P align=center&gt;&lt;STRONG&gt;&lt;FONT color=#ffffff size=4 face=Calibri&gt;Metric Selection&lt;/FONT&gt;&lt;/STRONG&gt;&lt;/P&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; WIDTH: 21.5pt; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" width=31&gt;&lt;/TD&gt; 
  &lt;TD class=xl65 style="BORDER-TOP: windowtext 1.5pt solid; BORDER-RIGHT: windowtext 1.5pt solid; WIDTH: 118pt; BORDER-BOTTOM: windowtext 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: #3166ff" width=157&gt; 
  &lt;P align=center&gt;&lt;STRONG&gt;&lt;FONT color=#ffffff size=4 face=Calibri&gt;Channel&lt;/FONT&gt;&lt;/STRONG&gt;&lt;/P&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; WIDTH: 21.5pt; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" width=31&gt;&lt;/TD&gt; 
  &lt;TD class=xl65 style="BORDER-TOP: windowtext 1.5pt solid; BORDER-RIGHT: windowtext 1.5pt solid; WIDTH: 128pt; BORDER-BOTTOM: windowtext 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: #3166ff" width=157&gt; 
  &lt;P align=center&gt;&lt;STRONG&gt;&lt;FONT color=#ffffff size=4 face=Calibri&gt;Trade Panel Selection&lt;/FONT&gt;&lt;/STRONG&gt;&lt;/P&gt;&lt;/TD&gt; 
  
  
  &lt;TR style="HEIGHT: 15pt" height=20&gt; 
  &lt;TD class=xl66 style="BORDER-RIGHT: windowtext 1.5pt solid; BORDER-TOP-COLOR: windowtext; BORDER-BOTTOM: black 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: transparent" rowSpan=7&gt;&lt;FONT size=4 face=Calibri&gt;&lt;P&gt;&lt;STRONG&gt;&lt;U&gt;Metric Selection:&lt;/U&gt;&lt;/STRONG&gt;&lt;/P&gt;
  &lt;P&gt;&lt;STRONG&gt;Metric:&lt;/STRONG&gt; &lt;SpotfireControl id="96184134b79e4dd4a0fb06aba8af4442" /&gt; &lt;/P&gt;
  &lt;P&gt;&lt;STRONG&gt;Threshold: &lt;/STRONG&gt;&lt;SpotfireControl id="0695ba526b4045a5ba87408ff3b508e3" /&gt;&lt;/P&gt;
  &lt;P&gt;&lt;STRONG&gt;Plan Type: &lt;/STRONG&gt;&lt;SpotfireControl id="b8617a4560804448823d6bd61bba9235" /&gt;&lt;/P&gt;&lt;/FONT&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt; 
  &lt;TD class=xl66 style="BORDER-RIGHT: windowtext 1.5pt solid; BORDER-TOP-COLOR: #f7fdfa; BORDER-BOTTOM: black 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: transparent" rowSpan=7&gt;&lt;FONT size=4 face=Calibri&gt;&lt;SpotfireControl id="8f9ef7c8a16d451889733e5d3d9f8a43" /&gt;&lt;/FONT&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt; 
  &lt;TD class=xl66 style="BORDER-RIGHT: windowtext 1.5pt solid; BORDER-TOP-COLOR: #f7fdfa; BORDER-BOTTOM: black 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: transparent" rowSpan=7&gt;&lt;FONT size=4 face=Calibri&gt;&lt;SpotfireControl id="1e977330ab2b4e1e94bfd62c710b11ef" /&gt;&lt;/FONT&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt; 
  &lt;TR style="HEIGHT: 15pt" height=20&gt; 
  &lt;TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt;&lt;/TR&gt; 
  &lt;TR style="HEIGHT: 15pt" height=20&gt; 
  &lt;TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt;&lt;/TR&gt; 
  &lt;TR style="HEIGHT: 15pt" height=20&gt; 
  &lt;TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt;&lt;/TR&gt; 
  &lt;TR style="HEIGHT: 15pt" height=20&gt; 
  &lt;TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt;&lt;/TR&gt; 
  &lt;TR style="HEIGHT: 15pt" height=20&gt; 
  &lt;TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt;&lt;/TR&gt; 
  &lt;TR style="HEIGHT: 15.75pt" height=21&gt; 
  &lt;TD style="HEIGHT: 15.75pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=21&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt;&lt;/TR&gt; 
  &lt;TR style="HEIGHT: 15.75pt" height=21&gt; 
  &lt;TD style="HEIGHT: 15.75pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=21&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt; 
  &lt;TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"&gt;&lt;/TD&gt;&lt;/TR&gt; 
  
  
  &lt;/TBODY&gt;&lt;/TABLE&gt; &lt;/div&gt;
  
  
  $("#c970da0f1b5549a88d27f368f6770f2f").on('change',function(){
   $("option:selected",this).text()=="Show"?
    $("#showHidecontainer").fadeIn():
    $("#showHidecontainer").fadeOut()
  })
  </code></pre>