How can I use JQuery on my page?

Question

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.

Answer 1

I would use the JQuery UI (www.jqueryui.com) classes to perform SHOW/HIDE functionality on the price click event.

Answer 2

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');
});

Answer 3

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");
   }
});