Accordion Menu - How do I know that it will slide up or down??

Question

Hi I have a question

I got an accordion menu(code below) and under the accordion menu I have a tag box. When accordion menu extends, I want to make my tag box go below the extended menu instead of extended menu covering up my tag box. So I change the value of css property "top" for my tag box after I count the # of sub-items being opened.

<div id="accordion"> 
  <h3>NOTEBOOKS</h3>

  <div class="sub_items" style="padding-top:0px;padding-bottom:0px;">
    <div onMouseOver="bgFadeIn(this)" onMouseOut="bgFadeOut(this)">
      <a href="http://127.0.0.1/casecrown_final/index.php/notebooks/black-slim.html"&gt;  
      <span>BLACK SLIM</span></a>
    </div>

    <div onMouseOver="bgFadeIn(this)" onMouseOut="bgFadeOut(this)">
      <a href="http://127.0.0.1/casecrown_final/index.php/notebooks/checkered-slim.html"&gt; 
         <span>CHECKERED SLIM</span></a>
    </div>
  </div>

  <h3>Another item</h3>
  <div class=sub_items" ......
.......
.....
</div>

jQuery(document).ready(function() {

   var countTotalCategories = jQuery('#accordion > h3').size();
   var defaultHeight = countTotalCategories * 30;

   jQuery('#accordion> div').hide();  

   jQuery('#accordion> h3').click(function() {
      jQuery(this).next('div').slideToggle(400)
      .siblings('div:visible').slideUp(400);

      countProducts = jQuery(this).next('div').children('div:visible').size();
      var calculatedHeight= defaultHeight + 29 * countProducts;

      jQuery('.mini-product-tags').css('top' , calculatedHeight + 'px');
});

NOW, How do I know that whether user is opening up a new menu to extend it...OR the user is closing the menu. I have no idea how to determine whether the user is closing up the menu so I can set the tag box value to the default when all accordion menu is closed. It seems like I only figure that out after the click event, I'm not sure when jQuery toggle event is being handled.

Answer 1

It might not be the prettiest way of doing it, but why not just find out whether the next element after your <h3> (i.e. your actual accordion container <div> tag) has display: none or not?

If your container is visible, then the click event will be to close it. If the container is not visible, then the click event will be to open it.

So:

$(function() {

   ...

   $('#accordion> h3').click(function() {
      if ($(this).next('div').css("display") == "none")
      {
        // My accordion pane is closed
      }
      $(this).next('div').slideToggle(400)
      .siblings('div:visible').slideUp(400);
      ...

Answer 2

I agree, you'll want to check for visibility. I would also consider using a different markup.

Here is a working example

the jquery:

// hide all that are not active
$("dd:not(#active)").hide(); 

// when the link is clicked (could make this an h3 if you wanted)
$("dt a").click(function(){ 
    // slide up the visible siblings
    $(this).parent().next().siblings("dd:visible").slideUp("fast"); 
    // slide down the next parent
    $(this).parent().next().slideDown("fast"); 
    // remove the class of current from any other dt a
    $(".current").removeClass("current"); 
    // add the class of current to the anchor tag
    $(this).addClass("current"); 
    return false; 
});

the html:

<dl> 
<dt><a href="#">SOME ITEMS!</a></dt> 
<dd> 
<ul> 
  <li>Something</li> 
  <li>Something</li> 
  <li>Something</li> 
  <li>Something</li> 
  <li>Something</li> 
  <li>Something</li>           
</ul> 
</dd> 

<dt><a href="#">OTHER ITEMS!</a></dt> 
<dd> 
<ul> 
  <li>Other thing</li> 
  <li>Other thing</li> 
  <li>Other thing</li> 
  <li>Other thing</li> 
  <li>Other thing</li> 
  <li>Other thing</li>           
</ul> 
</dd> 

<dt><a href="#">ZOMG, MORE ITEMS!</a></dt> 
<dd> 
<ul> 
  <li>MORE things</li> 
  <li>MORE things</li> 
  <li>MORE things</li> 
  <li>MORE things</li> 
  <li>MORE things</li> 
  <li>MORE things</li>           
</ul> 
</dd>