Jquery reveal panel (top) to show contact details
Posted by admin | Posted in jquery | Posted on 11-08-2009
2
Little jquery script to open a tab panel on your site simple but effective.
live demo here
<script >
$(document).ready(function(){
$("#contactimg").live("click", function(){
$("#contact").html("<p id='closebox'>Close Contact</p>");
$("#contact").html('<img src="image_top/close.jpg" id="closebox"/>');
$(".contact_hidden").animate({ height: "200px",}, 1500 );
})
$("#closebox").live("click", function(){
$("#contact").html('<img src="image_top/contact_button.png" id="contactimg"/>');
$(".contact_hidden").animate({ height: "0px",}, 1500 );
})
});
</script>
//and then some html ..
<div class="contact_hidden">
><h2> Your hidden content goes here!!</h2>
</div>
<div class="main">
<div class="contact" id="contact">
<img src="image_top/contact_button.png" alt="contact_button" id="contactimg"/>
</div>
<h2> Your main content goes here</h2><br /><br />
<p>Main content</p>
</div>
Thats it a bit of css and your all set – let me know if you use it. Ideally you’d set the close and open buttons to preload to avoid any jerkiness.
Download all files
This is awesome dude, but I’m seeing a problem with IE7. Is this a known issue you’re dealing with?
Wow James, I thought this blog post was dead!
I wrote this a long time ago there are a couple of errors in the code specifically:
$(“.contact_hidden”).animate({ height: “0px”,}, 1500 );
Should read:
$(“.contact_hidden”).animate({ height: “0px”}, 1500 );
There is an extra , after “0px”
There is actually a much better way to do this sort of thing which is to use .toggle rather than animate.
I’ve rewrote the example here, Anything else I can help with let me know, Cheers, Matt
Anything else I can do please let me know, Cheers, Matt