2

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>

Improve this question

2 Answers 2

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

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;?
The code is not working when I move the toggleh divs to another box.
<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:
<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>
Probably due to your CSS rules (display:none;)
|
0

Use this simple code to hide/show menu (or any div)

<script type="text/javascript"> function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } </script> <a href="#" onclick="toggle_visibility('foo');toggle_visibility('foo2_too');">Click here to toggle visibility of element #foo</a> <div id="foo" style="display:block">This is foo</div>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.