work with multiple DIV IDs

[esso82]

hi guys, I am a JS beginner and I need an advice. I want to make multiple sliding (show/hide) boxes but don't know how to do that. I am able to slide the box when manualy set ID of the sliding DIV but the problem is there will allways be unknown number of boxes on the page ... so what do I have so far is:

<script type="text/javascript">
$(document).ready(function(){
var matched_id = "0";
$("#boxtitle_0").click(function(){
 $("#boxcont_0").slideToggle("fast");
if (document.getElementById('boxtitle_0').innerHTML == '[hide]')
{document.getElementById('boxtitle_0').innerHTML = '[show]'}
else
{document.getElementById('boxtitle_0').innerHTML = '[hide]'}
 });
});
</script>

// show box function
$box_id = 0;
function showbox($boxcap, $boxcont, $width, $box_id) {
echo "<div class='box' id='box_".$box_id."' style='width:".$width."'>";
echo "<div><h2 class='boxcap'>".$boxcap."<span id='boxtitle_".$box_id."' class='boxcap'>[hide]</span></h2></div>";
echo "<div id='boxcont_".$box_id."' class='boxcont'>".$boxcont." - box ID = ".$box_id."</div>";
echo "</div>";
}

//part which displays my sliding boxes
$boxcont = "content here";
showbox ("New box",$boxcont,"100%",$box_id++);
echo "<div class='page_gap15'></div>";
$boxcont = "another content here";
showbox ("Box number 2",$boxcont,"100%",$box_id++);

//and CSS
DIV.box {
background-color: #eeeeee;
border: 1px solid #0379ab;
margin-left: auto;
margin-right: auto;
overflow: auto;
}

h2.boxcap {
font-size: 13px;
background-color: #0379ab;
color: #eeeeee;
margin: 0px;
padding: 5px;
}

span.boxcap {
float: right;
cursor: pointer;
font-size: 10px;
font-style: italic;
}

DIV.boxcont {
padding: 5px;
}

so the question is ... how do I automaticaly target the box I want to slide by clicking the show (hide) text?

[daveVk]

You need to work in terms of class names rather than ids.

You want to do all boxcap.

Also pass 'this' to click function ( the clicked boxcap )

$(document).ready(function(){
var matched_id = "0";
$(".boxcap").click(function(this){
$(this).closest('.box').find('.boxcont').slideToggle("fast");
if (this.innerHTML == '[hide]')
{this.innerHTML = '[show]'}
else
{this.innerHTML = '[hide]'}
});
});

[daveVk]

Ops
$(".boxcap").click(function(this){
should be
$(".boxcap").click(function(){

[esso82]

thank you dave for your reply ... it doesn't work exactly the way I expected (it replaces the $boxcap with $boxtitle obviously because both DIV and span have the same class name, could be changed - no problem, but...) ... what I thought is, there could be new Regexp added which points to that active element ... another thing .. I don't know to work with the "this" object ...

so I don't have time now, will have a look at it later and will try to play with it ... you see .. this is best for me ... have a working example of what do I want to do and then play with it, adjust things, add or remove something and so on .... so thank you very much Dave

[daveVk]

Did not notice dual use of boxcap, either change to say, boxcapDiv and boxcapSpan OR use span.boxcap as in the css.

$("span.boxcap").click(function(){

'this' refers to the object to which a function is attached, in this case the particular span.boxcap clicked. To make code more readable give it a name.

function(){
var boxcapSpan = this;
$(boxcapSpan).closest('.box').find('.boxcont').slideToggle('fast');
if (boxcapSpan.innerHTML == '[hide]')
{boxcapSpan.innerHTML = '[show]'}
else
{boxcapSpan.innerHTML = '[hide]'}
}

[g1smd]

That also solved a problem I was having right this very minute.

Thanks!

[esso82]

only now i had time to try it out .. it works and I understand now .. thank you very much Dave