title: How do I nest subheaders in an accoridion in jQuery?
body: <p>I am trying to use jQuery within SharePoint to develop a dynamic page that will allow users to collapse and expand content using this site as a model: <a href="http://summit7systems.com/how-to-create-dynamic-accordions-in-sharepoint-pages/" rel="nofollow">http://summit7systems.com/how-to-create-dynamic-accordions-in-sharepoint-pages/</a>. My only problem is that I would like to be able to collapse/expand subheaders nested within higher levels. Everything works when I am collapsing content under an h2, but when I also try and collapse content under an h3 within an h2, the h3 headers collapse, but now the paragraph text does not collapse under the h2. Can anyone show me what I may be doing wrong?</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-js lang-js prettyprint-override"><code>&lt;script language="javascript" type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.2.min.js"&gt;&lt;/script&gt; 
  &lt;script language="javascript" type="text/javascript"&gt; 
   
      $(document).ready(function () { 
          var inEditMode = Utils.checkPageInEditMode(); 
          // Prevent the collapsing of &lt;h2&gt; blocks when in SharePoint's [Edit Mode] 
          if (!inEditMode) { 
              UI.collapseContentHeaders(); 
              UI.toggleContentHeaders(); 
          } 
      }); 
  
  
      var UI = { 
        collapseContentHeaders: function () { 
           $('#DeltaPlaceHolderMain h2').each(function (index, value) { 
             // Collapses all &lt;h2&gt; blocks except for the first encountered 
                  $(this).toggleClass('expand').nextUntil('h2').slideToggle(400); 
              }); 
    $('#DeltaPlaceHolderMain h3').each(function (index, value) { 
                 $(this).toggleClass('expand').nextUntil('h3').slideToggle(400); 
             }); 
          }, 
  
          toggleContentHeaders: function () { 
              // Toggles the accordion behavior for &lt;h2&gt; regions onClick 
              $('#DeltaPlaceHolderMain h2').click(function () { 
                  $(this).toggleClass('expand').nextUntil('h2').slideToggle(400); 
              }); 
        $('#DeltaPlaceHolderMain h3').click(function () { 
                  $(this).toggleClass('expand').nextUntil('h3').slideToggle(400); 
              });
       $('#DeltaPlaceHolderMain h4').click(function () { 
                  $(this).toggleClass('expand').nextUntil('h4').slideToggle(400); 
              });
          } 
      } 
  
      var Utils = { 
       checkPageInEditMode: function () { 
              var pageEditMode = null; 
              var wikiPageEditMode = null; 
           // Edit check for Wiki Pages 
          if (document.forms[MSOWebPartPageFormName]._wikiPageMode) { 
               wikiPageEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value; 
            } 
              // Edit check for all other pages 
          if (document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode) { 
                pageEditMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value; 
             } 
             // Return the either/or if one of the page types is flagged as in Edit Mode 
             if (!pageEditMode &amp;&amp; !wikiPageEditMode) { 
                  return false; 
              } 
              return pageEditMode == "1" || wikiPageEditMode == "Edit"; 
       } 
    } 
  
  &lt;/script&gt; </code></pre>
  </div>
  </div>
  </p>