CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Chris
Chris

Reputation: 5

display div athough only another id triggered

I got some problems adressing only one div.

When I click on "impressum" only the impressum is shown inside the <div class="ContentBox">. But when I click on "AboutMe" it's showing both div's (aboutMe and impressum)

Am I blind??

Thats what i got:

        <div id="menu">
        <div class="inhalt">
            <ul>
                <li><a href="#"><img src="img/menu/home.png">Home</a></li>
                <li><a href="#" class="ContentBox_open" id="AboutMe"><img src="img/menu/ich.png">Über mich</a></li>
                <li><a href="#" class="ContentBox_open" id="impressum"><img src="img/menu/impressum.png">Impressum</a></li>
            </ul>
        </div>
    </div>

    <div class="ContentBox">
        <div class="close"><img id="ContentBox_close" src="img/menu/kategorien.png" alt="close"></div>
        <div id="impressumTxt" style="display:none;">
            <h1>Impressum</h1>
            <p>bla blub bla bla </p>
        </div>
        <div id="AboutMeTxt" style="display:none;">
            <h1>Über mich</h1>
            <p>bla blub bla bla </p>
        </div>
    </div>
    <script type="text/javascript" charset="utf-8">
        $(function(){
            // impressum anzeigen
            $('.ContentBox_open').click(
                function(event) {
                    var ContentId = event.target.id;
                    $('#'+ContentId+'Txt').fadeTo( 10, 0.90 );
                    $('.ContentBox').fadeTo( "slow", 0.90 );
                }
            );

            // impressum ausblenden
            $('#ContentBox_close').click(
                function() {
                    $('.ContentBox').fadeTo( 1000, 0 );
                }
            );
        });
    </script>

Thanks for your help!

Upvotes: 0

Views: 65

Answers (2)

empiric
empiric

Reputation: 7878

You can just add a class to your Textsection of About Me and Impressum to hide them before you show antoher section.

In your case, a opened section is not closes before a another is openend.

Just add $('.class').hide() before you open the new section

Fiddel as an example

Upvotes: 0

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93571

You need to hide all child content divs when you close the container. Otherwise they are still visible when you fadein the parent container again. Always make sure items with a common behavior have a common class you can access (I added class="content" for this example):

e.g.

$('.ContentBox').fadeTo(1000, 0, function(){
    $(this).find('.content').hide()
});

JSFiddle: http://jsfiddle.net/zo83qpdq/

    $(function () {
        // impressum anzeigen
        $('.ContentBox_open').click(function (event) {
            var ContentId = event.target.id;
            $('#' + ContentId + 'Txt').fadeTo(10, 0.90);
            $('.ContentBox').fadeTo("slow", 0.90);
        });

        // impressum ausblenden
        $('#ContentBox_close').click(function () {
            $('.ContentBox').fadeTo(1000, 0, function(){
                $(this).find('.content').hide()
            });
        });
    });

If you want only one div to show at a time you need to change the show logic to hide all other content divs.

e.g. JSFiddle: http://jsfiddle.net/zo83qpdq/1/

Upvotes: 1

Related Questions