CODEWITHSUNDEEP
javascriptjquerycsshtml
sirweatha
sirweatha

Reputation: 27

jquery stop animation on click when content is visible

i have two divs that contain separate content. the first div's content is displayed when the user loads the page, and the second div's content is hidden. when the user clicks on the second div, the first div's content disappears, and the second div's content is now visible. but if the user clicks on either div when it is visible, the div's content disappears. i am not skilled in javascript and found most of the code i am using online and would like to know how to make it so that when the div's content is visible the it doesn't disappear when clicking on it.

<!doctype html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <script src="js/jquery.js"></script>
        <script>
            $(document).ready(function() {
                $("#div1_text").click(function() {
                    if ($(this).next().is(":hidden")) {
                        $(this).next().slideDown(300);
                        $("#div2_text").next().slideUp(300);
                    } else {
                        $(this).next().hide(300);
                    }
                    if ($(this).next().is(":visible")) {

                    }
                });
                $("#div2_text").click(function() {
                    if ($(this).next().is(":hidden")) {
                        $(this).next().slideDown(300);
                        $("#div1_text").next().slideUp(300);
                    } else {
                        $(this).next().hide(300);
                    }
                    if ($(this).next().is(":visible")) {

                    }
                });
            });
        </script>
        <style>
        html {
            background: #34495e;
        }
        #div1 {
            background: rgba(255, 255, 255, 0.70);
            width: 100%;
            height: auto;
        }
        #div2 {
            background: rgba(255, 255, 255, 0.70);
            width: 100%;
            height: auto;
            margin-top: 20px;
        }
        .text {
            text-align: center;
            cursor: default;
        }
        .content {
            background: #e74c3c;
            height: 50px;
        }
        #div2_content {
            display: none;
        }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div1_text" class="text">
                blah
            </div>
            <div id="div1_content" class="content">
            </div>
        </div>
        <div id="div2">
            <div id="div2_text" class="text">
                blah blah
            </div>
            <div id="div2_content" class="content">
            </div>
        </div>
    </body>
</html>

Upvotes: 0

Views: 352

Answers (1)

Goran.it
Goran.it

Reputation: 6299

Just remove else statement like this :

        $(document).ready(function() {
            $("#div1_text").click(function() {
                if ($(this).next().is(":hidden")) {
                    $(this).next().slideDown(300);
                    $("#div2_text").next().slideUp(300);
                }
            });
            $("#div2_text").click(function() {
                if ($(this).next().is(":hidden")) {
                    $(this).next().slideDown(300);
                    $("#div1_text").next().slideUp(300);
                }
            });
        });

Here is a demo : http://jsfiddle.net/4G8NM/

Upvotes: 1

Related Questions