Minimize / Maximize content window using radio button

Question

I'm going straight to the point, I have several boxes that I want to expand and collapse using the switch located in their headers. This switch is an anchor tag that has a sprite background, the top of this sprite image is pointing up, and the bottom is pointing down. You can guess what they mean, and I want their state to be changed (first for crash and second for expansion)

The structure of the boxes looks 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 easiest ways to achieve this effect. Below you can see the following CSS and jQuery code. (I chose the active class by default when the icon points up)

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 great help :)

Change No. # 1:

Thanks to @Recode, their advice worked fine, but in accordance with what I explained, and you can see in this picture. I want to show the status of this using the icon

Active points to the top and Inactive points to the bottom when I want the window to be minimized. I show "Active" and when I want the window to expand, I show "Inactive". With this code, I was able to show the active default (I set the class of each window to active manually, if there is a better way to set the default class to active or something else, pay attention.) When I click on it, the box crashes and the icon goes into the "Inactive" state. And when I click again, the window expands, but the icon remains in the same state (inactive and is indicated at the bottom).

And after clicking:

Here is the code:

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

Thanks 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 script: http://jsfiddle.net/Recode/DLxaB/1/

Answer 2

Try the following: FIddle

JQuery Code:

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

.slideToggle() .toggleClass()