Jquery.Click() Doens't work after it's used one time

Question

I have a really simple jquery.Click() function

//hide divs
$("#a-1").hide();

$(".v-1").click(function(){
    $("#a-1").show();
    $(".v-1").addClass("c-it");
    $(".c-it").click(function(){
        $("#a-1").hide();
        $(".v-1").removeClass("c-it");
    });
});

So when v-1 is clicked a-1 has to show and it will add an class named c-it. That works after that i click c-it , a-1 will hide again and the c-it class will be removed. So now we are the beginning again but now when i click v-1 nothing happens someone knows why?

Html

<i class="glyphicon glyphicon-plus v-1">&nbsp;<span>This is a question</span></i>
        <div id="a-1"><p>Awnser</p></div>

Answer 1

just use toggle() and toggleClass() better for you

$("#a-1").hide();

$(".v-1").click(function() {
  $("#a-1").toggle('hide');
  $(".v-1").toggleClass("c-it");

});

Answer 2

You should use a single click handler that simply toggles the visible state and the class.

$(".v-1").click(function(){
    $("#a-1").toggle();
    $(".v-1").toggleClass("c-it");
});