jQuery toggles active state - css

Question

I'm implementing this toggles on my page http://www.creativusmouse.com/Hyperion/html/toggles.html and wanted to have the toggle button to remain orange when it's active. Please find bellow the CSS and jQuery code used.
I believe this is something easy to achieve. Hope someone could help me.
Thank you ;)
jQuery(window).load(function(){
$('.toggle-view li').click(function () {
var text = $(this).children('div.toggle-content');
if (text.is(':hidden')) {
text.slideDown('200');
$(this).children('span').html('<i class="icon-minus"></i>');
} else {
text.slideUp('200');
$(this).children('span').html('<i class="icon-plus"></i>');
}
});
});
/* ======================== CSS ======================== */
.toggle-view {
margin:0;
padding: 0;
list-style-type:none;
}
.toggle-view li {
margin:0px 0px 25px;
position:relative;
cursor:pointer;
display: block;
font-weight: bold;
text-decoration: none;
}
.toggle-view h2 {
font-size:12px;
text-transform:uppercase;
margin:0;
padding:4px 0 4px 40px;
}
.toggle-view span {
background: none repeat scroll 0 0 #80acb9;
color: #fff;
font-size: 12px;
padding: 2px 4px 2px 2px;
position: absolute;
left: 0px;
top: 0;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.toggle-view li:hover h2 {
}
.toggle-view li:hover span {
background: none repeat scroll 0 0;
background:#F63;
color:#fff;
}
.toggle-view .toggle-content {
box-sizing: content-box;
display:none;
padding:10px 35px;
}
.toggle-view ul.square, .toggle-view ul.circle, .toggle-view ul.disc {
margin-left:20px;
}

Answer 1

add another class to the span element.
in CSS add the class selector to the for the span, that is the same as the hover one:
.activetoggle, .toggle-view li:hover span {
background: none repeat scroll 0 0;
background:#F63;
color:#fff;
}
and in javascript add:
$(this).children('span').toggleClass('activetoggle');
I think this might work.
here is a little simplified illustration on jsfiddle
Update: I updated the jsfiddle with your markup and code, and I toggle the class now on the li element
$('.toggle-view li').click(function () {
var text = $(this).children('div.toggle-content');
if (text.is(':hidden')) {
text.slideDown('200');
$(this).children('span').html('<i class="icon-minus"></i>');
} else {
text.slideUp('200');
$(this).children('span').html('<i class="icon-plus"></i>');
}
$(this).toggleClass('activetoggle');
});
to simplify everything a little =) The CSS selector is now .activetoggle span.
jsfiddle