Question

I have this code:

$(document).ready(function() {
 $('#list2').click(function() { 
  if ( !$('#text2').is(":visible") ){ 
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text2').slideDown(500); 
}
    });
});

html for text2:

<div id="svceText">
<div id="text2" class="shownText">
<p>.......</p> </div>
</div>

html for list2:

<div id="svceContent">
<div id="list2"><h3><a href="">blah blah</a></h3></div>
</div>

Clicking on list2 isn’t producing a correct slideDown on text2 – the top few pixels of text2 show, or nothing at all (different outcome with each click). Problem occurs in FF4/64bit and IE7/8/9.

Page can be viewed HERE.

I’ve tried modifying the script to:

 $('#list2').bind('click', function() {

but no luck. Erghhh…

Answer 1

I just had to put a hash/pound sign (#) in the href attribute for my anchor tags. Now the click functions works like a dream & I can get rid of the extraneous mouseover events that were making this web page a confusing mess.