title: jquery select child by class, on child-click toggle the parents class
body: <p>I am trying to select an element by <code>class</code>, and when it is clicked the parent is toggled.</p>
  
  <p><strong>HTML:</strong></p>
  
  <p>`</p>
  
  <pre><code>great-grandparent &lt;div class='section' id='section-18'&gt;
     grandparent       &lt;div class='docs'&gt;
            parent        &lt;div class='octowrap'&gt;
                  *          &lt;a class='octothorpe' href='#section-18'&gt;#&lt;/a&gt;
  </code></pre>
  
  <p>`</p>
  
  <pre><code>$('octothorpe').closest('div.section').click(function() {
                      $(".fold").toggle(500);
                        console.log('fold', $('.fold').length);
  
                  });
  });
  
  console.log("closest", $('.octothorpe').closest('div.section').length);
  </code></pre>
  
  <p>`</p>
  
  <pre><code>&lt;style&gt;
  .fold {
      display: None;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>`</p>
  
  <p>q1 answered &lt;&lt;<em>Neither work, so how do I test that the class element is being selected?
  Is there a standard console log message I can output? (I tried looking at firefox inspector, but couldnt tell if its getting selected or not.  How do I test this straightforward way?(ie without change the color, etc.. just in log?)</em> )>></p>
  
  <p>Am I chaining functions click and toggle correctly? 
  Only the child can be clicked, (octothorpe is a href), but the parent .section is what needs to be toggle?</p>
  
  <p><strong>for the code below:</strong> </p>
  
  <p>console.log.
  (For test of parents) closest = 1 , never changes.<br>
  (For test of fold) fold increments each time clicked.  But the toggleClass has no effect even with preventDefault(). Does style <code>display:None</code> not work in this situation?</p>
  
  <p>`</p>
  
  <pre><code>$(function() {
    $(".octothorpe").click(function(e) {
                               e.preventDefault();
                               var sector = $(this).closest("div.section");
                               sector.toggleClass(".fold");
                               //sector.(".fold").toggle();
                               console.log('fold', $('.fold').length);
                           });
    });
  
  console.log("closest", $('.octothorpe').closest('div.section').length);
  </code></pre>
  
  <hr>
  
  <p>Hi Thanks to all so far.  After some fiddling ive figured I cannot just select the great-grandparent, but the parent sibling and grandparent sibling.  If I just select the great-grandparent class then the element itself is essentially lost as I cannot bring it back!</p>
  
  <p>Therefore, I tried the more selective code below.  However, neither hide or slideUp/Down as below appear to do anythin.  The console.log output shows the fold class incrementing so the elements are being selected.</p>
  
  <p>Whats wrong with this code?</p>
  
  <p>`</p>
  
  <pre><code>$(function(){
    $('.octothorpe').on({
                            click:function(e){
                                e.preventDefault();
                                var pfold =$(this).closest('.octowrap').siblings('p');
                                var cfold =$(this).closest('docs').siblings('.code');
                                $pfold=$(pfold); $cfold=$(cfold);
                                //$pfold.hide();
                                //$cfold.hide();
  
                                if (!$pfold.hasClass("fold") &amp;&amp; !$cfold.hasClass("fold")) {
                                    $cfold.slideUp().addClass('fold');
                                    $pfold.slideUp().addClass('fold');
                                    console.log('fold', $('.fold').length);
                                }
                                else {
  
                                    cfold.slideDown().removeClass('fold');
                                    pfold.slideDown().removeClass('fold');
                                }    
                            }
                        });
  </code></pre>
  
  <p>});</p>
  
  <p>`</p>
  
  <p>`                                                                   </p>