13673

HTML Divs show/hide issue

Question:

Hi friends I have issue with divs. I have a link show/hide dive on my page on clicking which i have to show or hide specific divs. I am successful with doing it. But my issue is that whenever I click on that link div is get hide or shown but page get directly on the top & I have to scroll to down again. I don't want to scroll this and don't want to get to top.

Please help me out with this. Thank You in advance.

Update: Friend I got the answer from one of my friend. Actually I was using Because of href="#" URL get changed and page got to top every time I click on that link.

Answer1:

Are you trying to do this?

<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> </head> <body> <div id="wrapper"> <div id="container"> </div><!-- end of #container div --> <a id="showdiv">Show the div</a>|<a id="hideDiv">Hide the div</a>|<a id="toggle">Toggle</a> </div><!-- end of #wrapper div --> </body> </html>

Here's the css:

#container { width: 300px; height: 300px; background: red; margin-bottom: 20px; } #wrapper { margin: 40px auto; width: 400px; }

And here's the jquery

$(function() {// When document is ready, run this... //Get hold of the link with the id #showdiv and do something when you click it $("#showdiv").click(function() { // Grab the div with the id #container and show it // Alert me when you're done $("#container").show(2000, function() { alert("I'm done showing"); }); }); //Get hold of the link with the id #hideDiv and do something when you click it $("#hideDiv").click(function() { // Grab the div with the id #container and hide it // Alert me when you're done $("#container").hide(2000, function() { alert("I'm done hiding"); }); }); // Toggle - This is like a On/Off Switch //Get hold of the link with the id #toggle and do something when you click it $("#toggle").click(function() { // Grab the div with the id #container and show if hidden / hide if shown $("#container").toggle(2000); }); });

Of course you'd have to link to a copy of jQuery before using the script above. Here's a link to a demo: <a href="http://jsfiddle.net/tonystark/HhNBA/" rel="nofollow">http://jsfiddle.net/tonystark/HhNBA/</a>

Answer2:

Assuming you have a link

Inline (not recommended but likely what you have)

<script> function showhide(id) { var elem = document.getElementById(id); elem.style.display=elem.style.display=="none"?"block":"none"; return false; // MANDATORY } </script> <a href="#" onclick="return showhide('someId')">Toggle</a> <div id="someId">Show or hide me when you click a link</div>

Answer3:

You have to cancel the default behavior of the onclick handler of your link. For doing so, don't use return false in your click handler, but rather use event.preventDefault():

HTML:

<a href="#targetdiv" class="foo">hide me</a> <div id="#targetdiv">blah</div>

Javascript:

document.querySelector('a.foo').onclick = function(event) { try { document.querySelector(this.getAttribute('href')).style.display = 'none'; } catch (e) { console.error("couldn't find element to hide"); } event.preventDefault(); }

JQuery:

$('a.foo').click(function(event) { try { $($(this).attr('href')).hide(); } catch (e) { console.error("couldn't find element to hide"); } event.preventDefault(); })

More informations:

<ul><li><a href="http://www.quirksmode.org/js/events_early.html" rel="nofollow">http://www.quirksmode.org/js/events_early.html</a></li> <li><a href="http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/" rel="nofollow">http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/</a></li> </ul>

Answer4:

It happens because your link is pointing to something like #foo or just #, whereas it should not have a href (or have an empty one)...

Answer5:

remove the href attribute and apply a text-decoration style

<a style="text-decoration: underline;" title="click me"></a>

that'd seem to make more sense than applying an href you dont want, to block its normal operation later. an alternative for graceful degradation would be to use the href to point to the shown/hidden div, displaying normally by default and having javascript hide it where javascript is available.

<em>"Change your anchor (link) to a span so that it doesn't have that behaviour. Then, style it using css so it looks how you want it to look."</em>

i often use that techique. i.e., use a span or div with an onclick, styled with text-decoration: underline, cursor: pointer and possibly display: inline if you decide on a div. one caveat is that in IE6, css hover won't work on anything other than an anchor. that's easily fixed with javascript.

you could probably remove the href attribute completely. anchors have advantages as above (cross-browser :hover styles) and allow for a title attribute for tool tips etc.

Answer6:

you probaby have a # in href attribute like href=# please remove hash and instead of that write href='javascript:void(null);'

Recommend

  • What is the difference between GetComponent ().enabled and .SetActive (false); in unity
  • Youtube Video Player Fullscreen click event
  • HALF_PTR Windows data type
  • Can XOR be expressed using SKI combinators?
  • F#: In which memory area is the continuation stored: stack or heap?
  • What is the use of a session store?
  • Most efficient way to move table rows from one table to another
  • Flash radiobutton: how do I get the selected radiobutton?
  • Programmatically access files in Document set in sharepoint using Javascript
  • Hibernate to update table schema
  • didUpdatePushCredentials not get called
  • Defined variables not working in javascript files when I use getScript
  • Uncaught TypeError: $(…).select2 is not a function
  • Execute scripts AJAX returns
  • Button click event not firing in jQuery
  • How to use JavaScript to determine whether a file exists in a directory?
  • How do I get HTML corresponding to current DOM tree?
  • Jackson Parser: ignore deserializing for type mismatch
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Functions in global context
  • Change multiple background-images with jQuery
  • FileReader+canvas image loading problem
  • Is there any way to access browser form field suggestions from JavaScript?
  • Trying to switch camera back to front but getting exception
  • Change an a tag attribute in JavaScript based on screen width
  • jQuery tmpl and DataLink beta
  • SVN: Merging two branches together
  • Hibernate gives error error as “Access to DialectResolutionInfo cannot be null when 'hibernate.
  • Compare two NSDates in iPhone
  • How to disable jQuery.jplayer autoplay?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?
  • Binding checkboxes to object values in AngularJs
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?