Making code reusable or somethin like that....

Making code reusable or somethin like that....

Im sure I don't have to say im new in jquery,and that I never had nothing to do with Java or any coding before,you will see it from my question.
Something else.Im sorry if my english is strange and funny. Enough of that .....


CSS:

.gimme{
visibility:visible ;}



HTML : // Have class because i NEED it to be reusable .... 2-5 times on same page

<div id="holdingthat">// this is the only part that will have diferent ID every time
<div class="holdingEverything">
<div class="one"><img src="Sky.gif"></div>
<div class="two"><img src="Rose.gif"></div>
</div>
<div class="importantBox"> // this is that hidden div
something like pictures ..... and some txt...
</div>
</div>

OK .... let me say what I want to fulfill :
1. when ever I click on .holdingEverything to show .importantBox
2. Then,when ever I click somewhere ( not before that )on the page to close that div .... .importantBox . I want to be able to click inside that .importantBox.


SCRIPT :


$('.holdingEverything').click(function() {
$(this).next().addClass('gimme');
});

$(document).click(function(event) {
if(!$(event.target).parents($('.importantBox:visible').parent()).length) {
$('.importantBox:visible').hide();
}
});


Let me say that on the page where I have only one .holdingEverything code is somewhat different and is working.... but the
problem is when I need to reuse it, and change only the ID of holdingthat div.

If someone have time to help me,but not only in writing the code, but also in making some notes of why and how I would
be wery grateful....