make active tab in show / hide script

I have got a js scrip开发者_JAVA百科t of show / hide

html:

<div class="footernav">1111</div>

<div class="copy gutters hide">
    content1
</div>

<div class="footernav">2222</div>

<div class="copy gutters hide">
    content2
</div>

<div class="footernav">3333</div>

js:

$(function(){

$(".footernav").each(function(i,o){
  $(this).click(function(e){
    e.preventDefault();
    $("div.copy:eq("+i+")").toggle().siblings("div.copy").hide();
  });
});

});

css:

.hide {display:none;}
.show {display:block;}

DEMO : http://jsfiddle.net/kolxoznik1/DYbBe/

I need help with making active div. When div is active (opened) then div name (in example it is 1111 or 2222 or 3333 ... must have a style (like new color: red or bold)

In your click handler, either before or after toggling the selected copy div and hiding the other copy divs, you could toggle an active class on this and remove it from its footernav siblings:

$(this).toggleClass('active').siblings('div.footernav').removeClass('active');