title: jQuery hide or show element depending on other element's class
body: <p>I would like to hide/show an element depending on the class of a specific element in the page (the class changes whether the element is selected or not). How could I do that with jQuery? I thought about using the click() or change() function and then check the element's class to hide() or show() the other element.</p>
  
  <p>I try with the following code but it does not work:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script&gt;
  jQuery(document).ready(function() {  
      disableSectorAnalysis();
  });
          
  function disableSectorAnalysis(){        
      jQuery('#ygvtableel66').click(function(){
      if (jQuery('#ygvtableel66').attr("class") == "ygtvtable ygtvdepth2 ygtv-highlight0") {
          jQuery('select[id*="SectorGliederung"]').hide();
      } else jQuery('select[id*="SectorGliederung"]').show();       
      });
   }    
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The html code is the following. A 3-level tree is generated with Primefaces 2.2.1 library and I would like to hide/show the "Sectorgliederung element" when a specific node is unchecked/checked. 
  But in Primefaces 2.2.1 there does not seem to be a method to trigger an event on a specific node selection, which is why I am trying to access the value of each node through jQuery.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="punktlinie958"&gt;&lt;/div&gt;
  &lt;h2&gt;Fondsmodulauswahl&lt;/h2&gt;
  
  &lt;table class="Formular" width="944px"&gt;
  &lt;tr&gt;
  &lt;th&gt;Fondsmodule&lt;br/&gt;inkl. Zusatzmodule&lt;/th&gt;
  &lt;td&gt;
  &lt;p:tree value="#{treeFonds.root}" 
    var="node3" 
    selectionMode="checkbox"
    selection="#{treeFonds.selectedNodes}"
    
    propagateSelectionDown="true"
    propagateSelectionUp="true"
    
    expandAnim="FADE_IN"
    collapseAnim="FADE_OUT"&gt;
  
   &lt;p:treeNode&gt;
    &lt;h:outputText value="#{node3}"/&gt;
    
   &lt;/p:treeNode&gt;
   &lt;p:treeNode type="nodesFondsAnalyseKlein" &gt;
    &lt;h:outputText value="#{node3}"/&gt;
   
   &lt;/p:treeNode&gt;
   &lt;p:treeNode type="nodesPerformanceNetto"&gt;
    &lt;h:outputText value="#{node3}"/&gt;
   
   &lt;/p:treeNode&gt;
   &lt;p:treeNode type="nodesPerformanceBrutto"&gt;
    &lt;h:outputText value="#{node3}"/&gt;
    
   &lt;/p:treeNode&gt;
   &lt;p:treeNode type="nodesFondsAnalyseMittel"&gt;
    &lt;h:outputText value="#{node3}"/&gt;
    
   &lt;/p:treeNode&gt;
   &lt;p:treeNode type="nodesFondsAnalyseGroß"&gt;
    &lt;h:outputText value="#{node3}"/&gt;
    
   &lt;/p:treeNode&gt;
   &lt;p:treeNode type="nodesZusatzFonds"&gt;
    &lt;h:outputText value="#{node3}"/&gt;
    
   &lt;/p:treeNode&gt; 
  &lt;/p:tree&gt; 
  &lt;/td&gt;
  &lt;/tr&gt;
  
  
  
  &lt;tr&gt;
  &lt;th&gt;Aktienanalyse&lt;br/&gt;nach Sektoren **&lt;/th&gt;
  &lt;td&gt;
  &lt;h:selectOneMenu id="SectorGliederung"
   value="#{fondsBean.fonds2mappe.sectorgliederung.id}"
   disabled="#{sitzungBean.prio1Disabled}" styleClass="gross"
   style="float:left"&gt;
   &lt;f:selectItems value="#{fondsBean.sectorgliederung}" /&gt;
  &lt;/h:selectOneMenu&gt;
  &lt;/td&gt;
  &lt;/tr&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you for your help.</p>