jQuery基于按钮显示/隐藏内容

Question

I have a product page and i would like to add a tech spec button to the page which will open and close a show hide that is to be situated below the product description. I need the user to be taken down to the tech spec when the show hide opens.

I think i need to use jquery but when the show/hide is hidden, ie nobody has pressed the button the footer should come up, so there shouldnt be any white space.

any examples links that i could refer too?

could anyone be kind to make me a little jsfiddle?

Thanks

Answer 1

Really simple with jQuery slideToggle :

http://jsfiddle.net/r7Qf7/12/ (example with new scrolling on button click).

Scrolling to the tech specs section once the button is clicked can be accomplished with the animate function in jQuery, like so.

$('html,body').animate({
    scrollTop: $("#techspecs").offset().top
}, 'slow');

Answer 2

First, you've got to add the click event to the button, after the document is ready:

$(document).ready(function(){
    $("#Button_ID").click(function(){
        $('#Tech_Spec').toggle();
    });
});

jsfiddle: http://jsfiddle.net/YEtBy/