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.