使用切换折叠/展开内容框

Question

I go right to the point, I have a few boxes that I want them to be expanded and collapsed with a toggle located in their headers. This toggle is an anchor tag which has a sprite background, the top part of this sprite image is pointing at top, and bottom section is pointing at down. You can guess what they mean and I want their state to be changed (first one for collapse and second one for expand)

The structure of the boxes are something like this :

     <section class="box2">
        <header class="box-head">
            <div class="box-title fr">              
                <span class="box-icon"></span>
                <h3 class="box-title-text">Title Title</h3>
            </div>

            <a class="box-toggle fl active" href="#">A</a>
            <br class="cfx" />
        </header>

            <div class="box-content">
                <img src="img/chart-1.png" alt="" />
                                    //Content or collapsing data goes here
            </div>

    </section>

And I used one of the most straight forward ways to achieve this effect. You can see the following CSS and jQuery code below. (I chose active class as default when the icon is pointing at top)

JS :

 <script type="text/javascript">
        $("a.box-toggle").toggle(function(){
        $(this).addClass("active");
        }, function () {
        $(this).removeClass("active");
    });

    //Slide up and down on click
    $("a.box-toggle").click(function(){
        $(this).next("div.box-content").slideToggle("slow");
        });
    });
    </script>

CSS :

.widget-toggle { 
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    width: 18px; height: 9px;
    margin-top: 15px;
    margin-left: 13px;
    background: url(../img/sidebar-arrows.png) no-repeat 0 -18px;
}

.widget-toggle.active { 
    background: url(../img/sidebar-arrows.png) no-repeat 0 0;
}

Thanks for your huge help :)

Edit No. #1 :

Thanks to @Recode , their tip worked just fine, But according to what I explained and you can see in this picture. I wanna show the state of this with an Icon

Active is pointing at top and Inactive is pointing at bottom, when I want the box to be collapsed I'm showing "Active" and when I want the box to be expanded I'm showing "Inactive" . With this code I managed to show active at default (I set the class of each box to active manually, if there is a better way to set the default class to active or whatever else please note.) When I click on it, box collapses and the Icon transitions to Inactive state. And When I click again box expands but the Icon stays in the same state (Inactive and pointing at bottom).

And after clicking :

Here is the Code :

$("a.box-toggle").click(function(){
    $(this).addClass("active");
    }, function () {
    $(this).addClass("inactive");
});

Thanks a lot, Again.

Answer 1

Just use this:

$(document).ready(function() {
    //Slide up and down on click
    $("a.box-toggle").click(function(){
        $(this).toggleClass('inactive');
        $(this).parent().next("div.box-content").slideToggle("slow");
    });
});

http://jsfiddle.net/Recode/DLxaB/

updated fiddle: http://jsfiddle.net/Recode/DLxaB/1/

Answer 2

Try this: FIddle

jQuery code:

$("a.box-toggle").on('click', function () {
    $('div.box-content').slideToggle(200).toggleClass('active');
});

.slideToggle() .toggleClass()