Как правильно сверстать?

<a class="on" href="javascript:;">Включить</a>
 <a class="off" href="javascript:;">Выключить</a>
 
 <div class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, molestiae!
 </div>

.text {
  display: none;
}

.on {
  &.is-active {
    color: green;
  }
}

.off {
  &.is-active {
    color: grey;
  }
}

$on = $('.on');
$off = $('.off');
$text = $('.text');
active = 'is-active';

$on.click(function() {
  $text.fadeIn(300);
  $on.addClass(active);
  $off.removeClass(active);
})

$off.click(function() {
  $text.fadeOut(300);
  $on.removeClass(active);
  $off.addClass(active);
})