asked on

jquery div slider works by itself but not in HTML

I have a page (pasted below) that works fine if its an empty page, with no HTML other than what you see here. Once I put it in an HTML page, it does not work. By not work, I mean that it doesnt hide on load anymore and clicking by button wont trigger the js.

Any ideas?

<!--- Adding script for slider starts here --->
<script type="text/javascript">
$(document).ready(function(){
    $(".slidingDiv").hide();	
	$('.show_hide').click(function(){
		$(this).toggleClass("opened");
		$(".slidingDiv").slideToggle();
	});
	$('.cancel').click(function(){
		$(".slidingDiv").slideToggle();
	});
});
</script>

<div style="float: right; padding-top: 4px; padding-bottom: 4px; height: 5px;"><a href="javascript: void(0)" class="show_hide"><img src="images/seeMoreJewelry.jpg" width="101" height="5" border="0" /></a></div>

<!-- sliding div starts here-->
	<div class="slidingDiv" id="slidingDiv">
	  <form name="slideform" id="slideform" action="" method="post" onsubmit="return false;" enctype="multipart/form-data">
		  <p>xcpovuh sh</p>
		  <p>sfg</p>
		  <p>sfb</p>
		  <p>sdgb</p>
	  </form>
	</div>

Open in new window

Tom Beck

Not able to reproduce the problem with what you have posted. Using Firefox 14.0.1.

Can you post an entire, non-working page? What browser are you testing with?

14_east

ASKER

Hey thanks for resplying... So, you can get it to work? I cannot.. for the life of me. Im about ready to find another script!! I am using firefox 14.0.1 and IE 9. Neither work... unless I take what is above(above works fine...) and put it into HTML page - with html tags, head tags adn body tags. So aggravating...

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

14_east

ASKER

Perfect man! Thank you... I was putting the JS in the head, not in the body. Once I shoevd it into the body, it works great!!

Tom Beck

Weird. The $(document).ready() should make it a non-issue where you put the script. I played with it a little and noticed that if you comment out this line: $(this).toggleClass("opened");, which does not appear to be doing anything, the script works in the head section in Firefox.

Thanks for the points.