...

View Full Version : Help with hide(), show()



gilgimech
11-30-2010, 05:27 PM
I made this script to open and close a div

It works but if I apply it to multiple div's it opens and closes them all. I want it to only open/close for one div at a time



$(document).ready(function() {
$('.open_btn, .close_btn').click(function() {
if ($('.open_close_div').is(':visible')) {
$('.open_close_div').hide();
$('.close_btn').hide();
$('.open_btn').show();
} else {
$('.open_close_div').show();
$('.open_btn').hide();
$('.close_btn').show();
}
});
});




<div id="main_content_title">
HTML
<div class="open_btn"><a href="#"></a></div>
<div class="close_btn"><a href="#"></a></div>
</div>

<div id="content_main_wrapper" class="open_close_div">
content.............
</div>


I'm trying to avoid giving the div's unique names because I'm reusing them multiple times.

also, I also tried to write the script like this



(function( $ ){
$.fn.openCloseDiv = function() {
$('.open_btn, .close_btn').click(function() {
if ($('.open_close_div').is(':visible')) {
$('.open_close_div').hide();
$('.close_btn').hide();
$('.open_btn').show();
} else {
$('.open_close_div').show();
$('.open_btn').hide();
$('.close_btn').show();
}
});
}
});


But I couldn't get it to execute.

phpdeveloper
11-30-2010, 06:23 PM
Because of you can used same class name for all div.

Try to use all different class name or id to all div.

Or try to class name like open_close_div_1,open_close_div_2, ... , open_close_div_8

And count the total number of div and used for loop in jquery or javascript.

SB65
11-30-2010, 06:28 PM
Much easier to traverse the DOM using next():


$(document).ready(function () {
$('.button').click(function() {
$(this).next().toggle();
$(this).toggleClass('activeButton')
});

});


with html:


<div class='button'>Button</div>
<div class="open_close_div">
Content 1
</div>

<div class='button'>Button</div>
<div class="open_close_div">
Content 2
</div>

etc etc etc

Toggling the class on the clicked button means less unnecessary html and simpler js.

gilgimech
11-30-2010, 06:47 PM
Much easier to traverse the DOM using next():


$(document).ready(function () {
$('.button').click(function() {
$(this).next().toggle();
$(this).toggleClass('activeButton')
});

});


with html:


<div class='button'>Button</div>
<div class="open_close_div">
Content 1
</div>

<div class='button'>Button</div>
<div class="open_close_div">
Content 2
</div>

etc etc etc

Toggling the class on the clicked button means less unnecessary html and simpler js.

Well, I read that there is a cross browser compatibility issue with toggle().
from what I've read online Firefox doesn't like it. That's why I'm using hide()/show().

SB65
11-30-2010, 06:48 PM
News to me...code I've given you works perfectly in Firefox.

EDIT: A quick Google doesn't bring up any issues with FF and toggle either, and I've certainly never come across one.

gilgimech
11-30-2010, 07:18 PM
News to me...code I've given you works perfectly in Firefox.

EDIT: A quick Google doesn't bring up any issues with FF and toggle either, and I've certainly never come across one.

I dunno maybe I was dreaming.

Anyway, can't get the code you suggested to work at all. It might be the wrong approach to what I'm trying to achieve. I think it's because the div with the class="open_close_div" it wrapped in another div.

it's like this



<div id="content_main_bg_top">
<div id="main_content_title">
HTML<div class="button"><a href="#"></a></div>
</div>
</div>
<div id="content_main_bg_middle" >
<div id="content_main_wrapper" class="open_close_div" >
Content.........
</div>
</div>
<div id="content_main_bg_bottom"></div>

SB65
11-30-2010, 07:24 PM
Slighgtly more complex then:


$(document).ready(function () {
$('.button').click(function() {
$(this).parent().parent().next().find('.open_close_div').toggle();
$(this).toggleClass('activeButton')
});

});


So, from the clicked element we're going up two elements - .parent().parent() - then to the next element, then finding the child element with class 'open_close_div' and toggling that.

gilgimech
11-30-2010, 07:46 PM
Sweat. Thanks.

OK just so I understand.


$(this).parent().parent().next().find('.open_close_div').toggle();
Makes the script look up two levels of divs, and the ".find" looks for the div with class="open_close_div"?

So if I want to look down I would use siblings().

Is that right?

SB65
11-30-2010, 07:54 PM
.siblings() will find all elements at the same level in the DOM, including those before the matched element. .next() will find just the following sibling. There's also .prev(), which will find the preceding element, and nextAll(), which will find all the following siblings. Similarly prevAll().

You've probably found this already, but all the traversing methods are documented here (http://api.jquery.com/category/traversing/).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum