Html Divs Show/hide Issue

February 19, 2024 Post a Comment

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 th

Solution 1:

Are you trying to do this?

<!DOCTYPE html><htmllang="en"><head><title></title><metacharset="utf-8"></head><body><divid="wrapper"><divid="container"></div><!-- end of #container div --><aid="showdiv">Show the div</a>|<aid="hideDiv">Hide the div</a>|<aid="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/

Solution 2:

Assuming you have a link

Inline (not recommended but likely what you have)

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

Solution 3:

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:

<ahref="#targetdiv"class="foo">hide me</a><divid="#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:

Baca Juga

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

More informations:

Solution 4:

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

Solution 5:

remove the href attribute and apply a text-decoration style

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

javascript spravka