tags:

views:

53

answers:

1
Q: 

Trouble with Div Hide/Show on mouse click

Hi again RC, I tried your script but it isn't working right. I have edited my code below to show exactly what I am working with. Thank you so much for being helpful.

Quazi

Hi,

I am very new to JQuery.

I am trying to get a div to fade in after a click event and then hide after click anywhere. I have three divs set up to do this with css set as display:none. The problem is that the script does not work in IE8 and only works in ff/safari if I double click or triple click the menubar links below.

I am using the following code to show/hide these divs on mouse click:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"&gt;

body, html { margin:0; padding:0; color:black; background:black; color:black; } #logo { margin-top:1%; width:12%; margin-left:5%; padding:1%; border:2px solid #FF8c00; } #showsbanner { margin-top:1%; width:60%; position:absolute; right:2px; } #wrap { width:90%; margin:0 auto; background:black; color:black; } #header { padding:5px 10px; background:black; color:#ef9c00; } h1 { color:#35002c; font-family:"verdana"; font-size:25px; } h2 { color:#044476; font-family:"verdana"; font-size:18px; } h3 { color:#044476; font-family:"verdana"; font-size:15px; } #nav { padding:5px 10px; width:89%; margin-left:5%; background:#ff8c00; border:2px solid darkblue; } #nav ul { margin:0; padding:0; list-style:none; } #nav li { display:inline; margin:0; padding:0; color:white; }

#menubar {
    float:left;
    width:40%;
    padding:1%;
    background:#ff8c00;
    margin-bottom:1%;
    border:2px solid darkblue;
}
#bcity {

    float:right;
    width:50%;
    padding:1%;
    background:#ff8c00;
    margin-bottom:1%;
    border:2px solid darkblue;
}        
#aicbk {
    display:none;
    float:right;
    width:50%;
    padding:1%;
    background:#ff8c00;
    margin-bottom:1%;    
    border:2px solid darkblue;
}
#pdil{
    display:none;
    float:right;
    width:50%;
    padding:1%;
    background:#ff8c00;
    margin-bottom:1%;
    border:2px solid darkblue;
}
#footer {
    clear:both;
    padding:1px, 1px;
    background:#ff8c00;
    width:100%;
    border:2px solid darkblue;
}
#footer p {
    color:white;
    font-size:12px
}
* html #footer {
    height:1px;
}

//The last four lines are an IE bug fix

</style>


<script type="text/javascript" src="homepage_files/js/jquery-1.3.2.min.js"></script>


<script type="text/javascript">
$(document).ready(function() {
    var gLastH = null;
    var gLastId = null;
    $('.toggleh').hide();

    $('.toggle').click(function(e) {
        $('.toggleh:visible').fadeOut('slow');
        gLastId = $(this).attr('id');
        console.log('#' + gLastId + 'h');
        gLastH = $('#' + gLastId + 'h');
        $(gLastH).fadeIn('slow');
        e.stopPropagation();
    });

    $('*').click(function(e) {
        if ($(this).attr('id') != gLastId) {
            $(gLastH).fadeOut('slow');
        }

        e.stopPropagation();
    });
});
</script>

stuff... text here text here2 text here3 stuff...... 
    <div class="toggleh" id="toggle2h">

            <div id="aicbk">
                stuff....



            </div>
    </div>


    <div class="toggleh" id="toggle3h">


            <div id="pdil">

                stuff..    

            </div>

    </div>







<div id="footer">

    stuff..

</div>

+1  A: 

Here's a working sample, tested under Chrome 8.0.552.0 dev:

<html>
<head>
    <title>S.O. 3920865</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript">
    $(document).ready(function() {
        var gLastH = null;
        var gLastId = null;
        $('.toggleh').hide();

        $('.toggle').click(function(e) {
            $('.toggleh:visible').fadeOut('slow');
            gLastId = $(this).attr('id');
            console.log('#' + gLastId + 'h');
            gLastH = $('#' + gLastId + 'h');
            $(gLastH).fadeIn('slow');
            e.stopPropagation();
        });

        $('*').click(function(e) {
            if ($(this).attr('id') != gLastId) {
                $(gLastH).fadeOut('slow');
            }

            e.stopPropagation();
        });
    });
    </script>
</head>
<body>
    <div id="menubar">
        <div class="toggle" id="toggle1">
            text here
        </div>
        <div class="toggleh" id="toggle1h">
            some description in here I suppose
        </div>

        <div class="toggle" id="toggle2">
            text here2
        </div>
        <div class="toggleh" id="toggle2h">
            some description in here I suppose 2
        </div>

        <div class="toggle" id="toggle3">
            text here3
        </div>
        <div class="toggleh" id="toggle3h">
            some description in here I suppose 3
        </div>
    </div>
</body>
</html>

Perhaps you need to check jQuery UI accordion which can be what you really want.

EDIT: following 1st comment.

RC  2010-10-13 05:51:34
This is a super example RC! Thank you. It works perfectly of course. I just wonder if it is possible to script for three toggleh classes to load in a separate div box from the "toggle1", "toggle2" and "toggle3" . In other words can I have toggle1 click to open toggleh1 in a second div box, toggle2 click to open toggleh2 in the same second div box etc;?
Quazi  2010-10-13 06:22:01
I edited my code :)
RC  2010-10-13 06:52:02
I tried the code. Please see my changes in the re-edit.
Quazi  2010-10-13 07:27:57
@Quazi and what about it??
RC  2010-10-13 07:36:18
The code is not working when I move the toggleh divs to another box.
Quazi  2010-10-13 07:37:03
<div id="menubar"> <div class="toggle" id="toggle1"> text here </div> <div class="toggle" id="toggle2"> text here2 </div> <div class="toggle" id="toggle3"> text here3 </div> </div>then:
Quazi  2010-10-13 07:37:44
<div class="toggleh" id="toggle1h"> <div id="bcity"> stuff...... </div> </center> </div> <br> </div> <div class="toggleh" id="toggle2h"> <div id="aicbk"> stuff.... </div> </div> <div class="toggleh" id="toggle3h"> <div id="pdil"> stuff.. </div> </div>
Quazi  2010-10-13 07:38:08
Probably due to your CSS rules (`display:none;`)
RC  2010-10-13 08:01:58
Hi RC. Thanks. I removed the embarrassing display:none. lol. Still doesn't work though. Do you think the script can't identify toggleh when it is embedded in another div?
Quazi  2010-10-13 08:09:25
Nope, I think it's a css problem, try without any rule.
RC  2010-10-13 10:53:29

related questions

CSS for container divs and falling to the next line
CSS div element - how to show horizontal scroll bars only?
Jquery changing background of parent div.
Why doesn't dynamically generated content change the height of containing div?
How do you create non scrolling div at the top of an HTML page without two sets of scroll bars
How do I align spans or divs horizontally?
How can I have a sliding menu div that doesn't move unless the page is scrolled down past a certain point.
Div Positioning Problem
Overflow to left instead of right
How can I center content between a header and footer div?
How to create div to fill all space between header and footer div
HTML footer problem
IE Chopping off left of DIV
Div 100% height works on Firefox but not in IE. What to do?
Determining the height of an HTML table that is dynamically filled
How to force a DIV block to extend to the bottom of a page, even if it has no content?
DIV with overflow:auto and a 100% wide table problem
Make a <div> fade away nicely after a given amount of time
Make a div fill the remaining screen space
div class vs id
Best way to implement a 3-column website using <DIV> tags?
CSS - Placement of a div in the lower left-hand corner
How do you get the footer to stay at the bottom of a Web page?
Setting the height of a DIV dynamically
Scrolling Overflowed DIVs with JavaScript