[jQuery] How to test/filter for all divs being hidden ?
Hello I am a beginner to jquery/javascript and I am trying to use a
script I saw online to replace the content of a div. However I would
like to have the script start with none of the target content showing.
So far it starts correctly however I am not sure how to test/filter
for ALL the divs in #content being hidden which would be the begging
state of the page.
Here is a link to what it is doing now.
http://noworriestech.com/jquery/indext2.html
Here is the code
<script type="text/javascript">
$(function(){
$("#home-button").css({
opacity: 0.3
});
$("#about-button").css({
opacity: 0.3
});
$("#contact-button").css({
opacity: 0.3
});
$("#page-wrap div.button").click(function(){
$clicked = $(this);
// if the button is not already "transformed" AND is not animated
if ($clicked.css("opacity") != "1" && $clicked.is(":not
(animated)")) {
$clicked.animate({
opacity: 1,
borderWidth: 5
}, 600 );
// each button div MUST have a "xx-button" and the target div
must have an id "xx"
var idToLoad = $clicked.attr("id").split('-');
if ($("#content > div").is(":hidden")) {
$("#content").find("#"+idToLoad[0]).fadeIn();
}
else {
//we search trough the content for the visible div and we fade it
out
$("#content").find("div:visible").fadeOut("fast", function(){
//once the fade out is completed, we start to fade in the right
div
$(this).parent().find("#"+idToLoad[0]).fadeIn();
})}
}
//we reset the other buttons to default style
$clicked.siblings(".button").animate({
opacity: 0.5,
borderWidth: 1
}, 600 );
});
});
</script>
Thank you for you assitance in advance.