All geek questions in one place

Problem with Div Hide / Show on mouse click

I tried your script, but it does not work correctly. I edited my code below to show what I'm working with. Thank you so much for the usefulness.

Quazi

Hello,

I am very new to jQuery.

I am trying to make a div disappear in after a click event, and then hide after clicking anywhere. I have three divs configured for this with css set to display: none. The problem is that the script does not work in IE8 and only works in ff / safari if I double-clicked or three times clicked the menu links below.

I use the following code to show / hide these divs with a 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; upholstery: 0; black color; background: black; black color; } #logo {Stock-top: 1%; width: 12%; Stock to the left: 5%; upholstery: 1%; border: 2px solid # FF8c00; } #showsbanner {Stock-top: 1%; width: 60%; position: absolute; right: 2px; } # wrap {width: 90%; margin: 0 auto; background: black; black color; } #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%; Stock to the left: 5%; background: # ff8c00; border: 2px solid dark light; } #nav ul {Margin: 0; upholstery: 0; list-style: no; } #nav li {Display: built-in; Margin: 0; upholstery: 0; White color; }

 #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 IE error correction

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

material ... text here text here2 text here3 material ......
  <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>

+2
source share
2 answers

Here's a working sample tested in Chrome 8.0.552.0 dev:

 <html> <head> <title>SO 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>

You might need to check out the jQuery UI accordion , which might be what you really want.

EDIT : after the 1st comment.

+3
source

Use this simple code to hide / show a 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>
0
source

Source: https://habr.com/ru/post/1337743/

More articles:


All Articles