homepage Welcome to WebmasterWorld Guest from 54.242.200.172
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

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

JavaScript and AJAX Forum

    
work with multiple DIV IDs
esso82




msg:4414490
 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">
$(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




msg:4414555
 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 )

$(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




msg:4414570
 11:55 pm on Feb 5, 2012 (gmt 0)

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

esso82




msg:4414665
 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

daveVk




msg:4414948
 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.

$("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




msg:4415011
 10:23 am on Feb 7, 2012 (gmt 0)

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

Thanks!

esso82




msg:4416604
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved