JQuery function to expand multiple divs

dojoHobo
dojoHobo used Ask the Experts™
on
I have a jQuery function that condenses a div(subExpandMe) to a certain height, based on the height of another div(subArtSmall).  The second part allows the user to click a div to see the full content, and then condense it back down.

On the page I have four div boxes all with IDs that are numbered sequentially, (subExpander1, subExpander2...)The function is working fine for one div on the page, but when i have four, the "subArtFull" and "subArtSmall" variables are holding the values of the last div box (4).

I tried to make variable variables of them, so that each time the function was run, they would hold different values, but that didn't work.  I could just include the function 4 times with 4 different values in the document.ready section, but i wanted to make it more streamlined.  Any help is appreciated.
//javascript

function subTopicExpander (j){
	subArtFull = $("#subArtFull"+j).height () + 7;
	subArtSmall = $("#subArtSmall"+j).height() + 7;
	$("#subExpandMe"+j).css("height", "" + subArtSmall +"px");
	
	$("#subExpander"+j).toggle(
      function () {
        //$("#subExpandMe1").css("height", "" + subArtFull +"px");
		$("#subExpandMe"+j).animate( { height: subArtFull }, {duration:1000} );

      },
	   function () {
        //$("#subExpandMe1").css("height", "" + subArtSmall +"px");
		$("#subExpandMe"+j).animate( { height: subArtSmall }, {duration:1000} );
      });
};

$(document).ready(function(){
subTopicExpander("1");
subTopicExpander("2");
subTopicExpander("3");
subTopicExpander("4");
});



/// html
<div class="subTopic-box"> 
  <div class="subTopic-topWellness" id="subExpander#deptCount#">
    <div class="subTopic-padding-text" id="subTop#deptCount#"> 
    </div>
    <div class="subTopic-padding" id="subExpandMe#deptCount#">
      <ul id="subArtFull#deptCount#">
        <span id="subArtSmall#deptCount#">
        <li></li>
        <li></li>
        <li></li>
        </span>
        <li></li>
        <li></li>
      </ul>
    </div>
  <div class="subTopic-bottom">
  </div>
</div>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
try this code, if you want any changes,  i'll do it for  you.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu</title>
<style type="text/css">
	li
	{
		font:Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#000000;
	}
	li.active, a.active
	{
		color:#FF0000;
	}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
        $(function(){
                $("#nav li").click(function(){
						$("#nav li").removeClass('active');
						$(this).toggleClass("active").parents('li').addClass("active");
                        $(this).children('ul').slideToggle("slow");
                        return false;
                });
        });     
</script>
</head>

<body>
<ul id="nav">
            <li>Product Catalogue
                <ul style='display:none;'>
                  <li>Products
				  	<ul style='display:none;'>
					  <li><a href="products">Products
					  </a></li> 
					  <li><a href="categories">Categories</a></li> 
					  <li ><a href="brands">Brands</a></li> 
					</ul>
                  </li> 
                  <li><a href="categories">Categories</a></li> 
                  <li ><a href="brands">Brands</a></li> 
                </ul>
              </li> 
              <li>Contact Us</li> 
              <li>Address</li> 
        </ul>
</body>
</html>

Open in new window

Author

Commented:
Thanks.  That is very direct code.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial