jQuery??

[benjaminj88]

Alright so here's what I'm workin on:

a multidemensional menu for an rpg. Now there will be a few buttons which will uses this same effect. I will also need it to close as well.

The effect wanted: The container div's width expands out, and the height expands after,
displaying the items, actions, etc inside it. The menu should close in the reverse fashion height going down to 5px then width going back to 0.

Like I said I would like to use this event a couple times for various buttons. With how I was planning on doing it, it just seems to need too much code for it. So I was curious is there a way I can perform the action once but depending on the Button that was pressed pass a variable to determine which content to grab?

Here my code

the php/html

<h4 class="item">Inventory</h4>
<div class="inventory">
<div id="inventory">
ITEMS HERE
</div>
</div>
</div>

the jQuery
$(document).ready(function(){
$("h4.item").click(function(){
$("div.inventory").animate({width:"620px"},1000);
$("div#inventory").animate({height:"300px"},1000);
});
$("#inventory .close").click(function(){
$("div#inventory").animate({height:"0px"},1000);
$("div.inventory").animate({height:"0px"},1000);

$("div#inventory").animate({display:"none"},1000);
$("div.inventory").animate({display:"none"},1000);
});
});

as I said I would like to do the same effect for other buttons as well and would prefer not to use all the jQuery for each class item. Any ideas?

[TheMichael]

Create a function.


function(targetElement, otherStuffYouMightNeed) {
$(targetElement).animate(.....);
}

Does that answer your question?