如何使用 jQuery 滑动打开和关闭 div

Question

i have this div:

<div class="services_box">

            <div class="BOX_A">
                <img src="css/images/icon1.png" alt="" />
                <h1>Services title goes here</h1>
                <p>Aenean ultrices purus porttitor oro er risus molestie vestibulum. Morbi et nus metus justo, semper eget condimentum vitae, con varius ut sapien. Ut egestas enim non ante sagittis eget egestas tellus consequat.</p>
                <div class="servicesbutton"> <a href="#" title=""></a> </div>
            </div>

            <div class="BOX_B" **style="display:none;"**>
                <img src="css/images/icon1.png" alt="" />
                <h1>Services title goes here</h1>
                <p>Aenean ultrices purus porttitor oro er risus molestie vestibulum. Morbi et nus metus justo, semper eget condimentum vitae, con varius ut sapien. Ut egestas enim non ante sagittis eget egestas tellus consequat.</p>
                <div class="servicesbutton"> <a href="#" title=""></a> </div>
            </div>      

        </div>

how can i make the hidden div slide in and out on click on the link, using jQuery / js?

Answer 1

Something like this? Fiddle: http://jsfiddle.net/StJ9e/1/

$('div.BOX_A h1, div.BOX_B h1').click(function() {
    $(this).siblings('.slide').slideToggle();
});

Or if your looking for an accordion type effect:

Fiddle: http://jsfiddle.net/bK4rN/2/

var $last = jQuery('.BOX_A .slide');

$('.services_box').delegate('div > h1', 'click', function() {
    $last.slideUp();
    $last = $(this).siblings('.slide');
    $last.stop(true, true).slideDown();
});

---

Edit : in response to comment

I need something like this: jsfiddle.net/hJwqs/1... but i need only one this to change, not all.

Change your code to:

$("div.BOX_A a").click(function () {
    $(this).closest('.services_box').find('div.BOX_A').slideToggle();
});

Fiddle: http://jsfiddle.net/garreh/3KBug/

or for a styled one: http://jsfiddle.net/garreh/cuEUG/

Answer 2

you can use .fadeIn() method to make it appear and .fadeOut() to dissapear, also you can use the

.toggle() method, you can search more on google, here are the docs anyway:

toggle: http://api.jquery.com/toggle/

fadein: http://api.jquery.com/fadeIn/

fadeout: http://api.jquery.com/fadeOut/

Answer 3

Not very sure what you mean is it something like this?

$(document).ready(function() {
    $("div.BOX_A").bind("click", function() { $(this).slideToggle(); });
    $("div.BOX_B").bind("click", function() { $(this).slideToggle(); });
});

http://jsfiddle.net/AFLUp/

If you clarify what exactly should be seen/hidden etc I can modify the code to help you:)