Question

I have a confusing problem with plain jQuery . I need to make the first div detailsPane stay open always no matter when the header details is clicked or not. In other words wheat ever headers of whichever div is clicked, the div detailsPane should stay open ALWAYS. But I want the rest to be able to click open and close kinda like toggle.

The HTML is below

            <div class="petStockAccordion">
            <div id="accordion">
            <!-- DETAILS -->
              <h2 class="current">
                <a href="#tab-details" class="tab_01">
                    details
                </a>
              </h2>
              <div class="pane detailsPane" style="display:block">
                    DIV 1
              </div>
            <!-- Ingredients -->    
              <h2>
                <a href="#tab-reviews" class="tab_02">
                    ingredients
                </a>
              </h2>
              <div class="pane">
                This needs further work.
              </div>
            <!-- Delivery -->   
              <h2>
                <a href="#tab-deliveryTab" class="tab_03">
                    delivery

                </a>
              </h2>
              <div class="pane">
                    Div3
              </div>
            <!-- Reviews -->    
              <h2>
                <a href="#tab-reviews" class="tab_04">
                    reviews

                </a>
              </h2>
              <div class="pane">
                DIV4

              </div>
            </div>
            </div>

And the jquery part is below

            <script type="text/javascript">
            function initMenu() {
              $('.petStockAccordion #accordion .pane').hide();
              $('.petStockAccordion #accordion .detailsPane').show();
              $('#accordion h2 a').click(
                function() {         $(this).parent('h2').next('div').slideToggle('fast');    
                  }
                );
              }
            $(document).ready(function() {initMenu();}); 
            </script>

Answer 1

Do this, using “not” method. this will keep the “detailsPane” div open if you click the first anchor or not.

<script type="text/javascript">
function initMenu(){
    $('.petStockAccordion #accordion .pane').not('.detailsPane').hide();
    $('#accordion h2 a').click(function() {                          
          $(this).parent('h2').next('div.pane').not('.detailsPane').slideToggle('fast');    
     });
    $(document).ready(function(){ initMenu(); });
</script>