How can I use JQuery on my page?
On the screenshot, you see on the bottom there is a list of prices. I want it hidden by default 开发者_如何转开发and when I click on the button 'Prices', I want it to slide down from underneath. Then if I press it again I want the list to slide up again. How can I do this? Sorry if I didn't explain much, any questions please ask.
You'll want to use the slideDown and slideUp animation. The documentation has a nice example that you can copy from, but basically you want to put the part that slides up and down in a separate div
with the css display: none;
then add code like this:
$('#button').click(function () {
if ($("#prices").is(":hidden")) {
$("#prices").slideDown("slow");
} else {
$("#prices").slideUp("slow");
}
});
I would use the JQuery UI (www.jqueryui.com) classes to perform SHOW/HIDE functionality on the price click event.
Follow this tutorial:
http://net.tutsplus.com/javascript-ajax/build-a-top-panel-with-jquery/
Demo: http://nettuts.s3.amazonaws.com/041_TopPanelWithJquery/demo/index.html
jQuery docs:
http://api.jquery.com/category/effects/
http://api.jquery.com/slideToggle/
Basically what you want is:
$('#clickme').click(function() {
$('#panel').slideToggle('slow');
});
精彩评论