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.

Reply via email to