How to disable and enable the . Click() function of a span when I click on another span using on() off()

Question

I have two spans that work as buttons, when clicking on them appears an input to put an email and if you click again hides these inputs.

I managed to do the following:

Click on span1 -> Input1 appears and disables span2, and if you click it again hides input1 but does not enable span2

And I would like to click on it again besides hiding the input1 it enables the span2, a kind of toggle() in the off();

Follows the JS:

$('.new-step-email-aluno').hide();
		$('#btn-aluno').on('click', function() {
			$('.new-step-email-aluno').toggle();
			$('#btn-familiar').off();
		});

		$('.new-step-email-familiar').hide();
		$('#btn-familiar').on('click', function() {
			$('.new-step-email-familiar').toggle();
			$('#btn-aluno').off();
		});

I don’t know if it’s clear, I’ll fix anything. vlw

Answer 1

Follows a solution

$(function() {

  var $buttons = $('#btn-aluno,#btn-familiar');
  var $input = $('.new-step-email-aluno, .new-step-email-familiar');

  $buttons.on('click', function(e) {

    var $self = $(this);
    var active = $self.is('.active');
    var aluno = $self.is('#btn-aluno');
    var already = $('#btn-aluno.active , #btn-familiar.active').size() > 0;
    //Desabilita o click se houver um ativo.
    if (!active && already)
      return;

    if (!active) {

      if (aluno) {
        $('.new-step-email-aluno').show();
        $('.new-step-email-familiar').hide();
      } else {
        $('.new-step-email-aluno').hide();
        $('.new-step-email-familiar').show();

      }
    } else
      $input.hide();

    $buttons.removeClass('active');

    if (!active)
      $self.addClass('active');

  });

});

form { text-align:center;}
#btn-aluno , #btn-familiar { cursor: pointer; }
.new-step-email-familiar , .new-step-email-aluno { display:none;}
.active { border: 2px solid #333 !important; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.2.2/css/flat-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="btn-aluno" class="btn btn-primary">Sou aluno</span><br> <input type="text" name="fname" class="new-step-email-aluno"><br>
<span id="btn-familiar" class="btn btn-primary">Sou familiar</span><br>
<input type="text" name="fname" class="new-step-email-familiar" ><br>