1

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.

mevada.yogesh
  • 1,118
  • 3
  • 12
  • 35

6 Answers6

1

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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
1

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: http://jsfiddle.net/tonystark/HhNBA/

tonystark
  • 26
  • 1
1

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:

NiKo
  • 11,215
  • 6
  • 46
  • 56
  • Interesting intro to fairly new selector. [Compatibility](https://developer.mozilla.org/En/DOM/Document.querySelector#section_5) – mplungjan Dec 30 '11 at 09:12
0

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)...

P Varga
  • 19,174
  • 12
  • 70
  • 108
0

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.

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

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.

stackuser10210
  • 352
  • 1
  • 5
  • 11
-1

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

sushil bharwani
  • 29,685
  • 30
  • 94
  • 128