Home/ Questions/Q 3240290
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T18:04:06+00:00

I tried your script but it isn’t working right. I have edited my code

  • 0

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">

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>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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"></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>
</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.

    • 0