homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

work with multiple DIV IDs

Msg#: 4414488 posted 4:31 pm on Feb 5, 2012 (gmt 0)

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">
var matched_id = "0";
if (document.getElementById('boxtitle_0').innerHTML == '[hide]')
{document.getElementById('boxtitle_0').innerHTML = '[show]'}
{document.getElementById('boxtitle_0').innerHTML = '[hide]'}

// 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?



WebmasterWorld Senior Member 5+ Year Member

Msg#: 4414488 posted 10:33 pm on Feb 5, 2012 (gmt 0)

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 )

var matched_id = "0";
if (this.innerHTML == '[hide]')
{this.innerHTML = '[show]'}
{this.innerHTML = '[hide]'}


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4414488 posted 11:55 pm on Feb 5, 2012 (gmt 0)

should be


Msg#: 4414488 posted 12:27 pm on Feb 6, 2012 (gmt 0)

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


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4414488 posted 2:45 am on Feb 7, 2012 (gmt 0)

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


'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.

var boxcapSpan = this;
if (boxcapSpan.innerHTML == '[hide]')
{boxcapSpan.innerHTML = '[show]'}
{boxcapSpan.innerHTML = '[hide]'}


WebmasterWorld Senior Member g1smd us a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

Msg#: 4414488 posted 10:23 am on Feb 7, 2012 (gmt 0)

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



Msg#: 4414488 posted 3:02 pm on Feb 11, 2012 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved