Link to home
Start Free TrialLog in
Avatar of dojoHobo
dojoHobo

asked on

JQuery function to expand multiple divs

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

ASKER CERTIFIED SOLUTION
Avatar of ssrajsathya
ssrajsathya
Flag of Malaysia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of dojoHobo
dojoHobo

ASKER

Thanks.  That is very direct code.