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.
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER