Search jQuery

jQuery Forum

div show/hide problem

in Using jQuery • 13 years ago

Hello all,
This is my first post here as I'm fairly new to jquery. I'm having a bit of a problem with the show/hide div function. I'm trying to implement it on a larger site, but it isn't working, so I created a small page to test it on, but it still isn't working. The code $('#one').hide(); works fine to hide the div, #one, but the links don't work for showing/hiding the divs. Can anyone tell me where I am going wrong? This is the code I have:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

                           $('#one').hide();

                           $('#clickone').click(function() {
                           $('#one').show();
                           $('#two').hide();

                                                        });

                           $('#clicktwo').click(function() {
                           $('#one').hide();
                           $('#two').show();

                                                        });

                           });
</script>

<link href="css/global.css" rel="stylesheet" type="text/css" />
</head>

<body>

<ul>
<li><a href="javascript:void(0);" id="#clickone">ONE</a></li>
<li><a href="javascript:void(0);" id="#clicktwo">TWO</a></li>
</ul>

<br /><br /><br />

<div id="one">
ONE - Quis nostrud exercitation consectetur adipisicing elit, cupidatat non proident. Excepteur sint occaecat lorem ipsum dolor sit amet, eu fugiat nulla pariatur. In reprehenderit in voluptate ut enim ad minim veniam, mollit anim id est laborum. Ullamco laboris nisi lorem ipsum dolor sit amet, qui officia deserunt. In reprehenderit in voluptate consectetur adipisicing elit, ut enim ad minim veniam.
</div>

<div id="two" style="display: none;">
TWO - In reprehenderit in voluptate velit esse cillum dolore ut enim ad minim veniam. Lorem ipsum dolor sit amet, duis aute irure dolor qui officia deserunt. Ullamco laboris nisi consectetur adipisicing elit, ut labore et dolore magna aliqua. Velit esse cillum dolore excepteur sint occaecat sunt in culpa. Ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Replies(5)

ajpiano

Re: div show/hide problem

13 years ago

The IDs in your A tags have a # in the attribute, which is causing them not to be selected properly.

mathrud

Re: div show/hide problem

13 years ago

Thanks. That worked perfectly.

iiunderta..

Re: div show/hide problem

10 years ago

hi i'm delevoping a web site under JSP, and i put this code so a div element can hide and show using an anchor, the problem is that when i click the anchor the screen is moved suddenly up and the animation isn't showing.

Thak's for your help.

<script>

$(document).ready(function(){

$('#anchor').click(function(event) {

if($("#div").is (':visible')){

$("#div").slideUp()

}

else {

$("#div").show("slow");

}

})

});

</script>

this is how i call it..

<div id="div" style="display:none;">

JSP code...

</div>

kbwood.au

Re: div show/hide problem

10 years ago

This is a new question and should be in its own post. Nevertheless, you need to return false at the end of the click handler to prevent the default action, which for the anchor is to follow its link (presumably to reload the current page).

iiunderta..