JSFiddle - React, Tailwind, and code Playground

by Mac1ovin

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class='fact'> //btnHide
  <button class="btnMore moreRest" href='#'>скрыть рестики</button>
  <div class='mainHide'> //mainHide
    dfsdfsdfsdfsdfds
  </div>

</div>

CSS

.mainHide {
  display: none;
  }

  .btnMore {
    text-decoration: none;
  }

JavaScript

$(function() {
  $('.btnMore.moreRest').click(function(e) {
    var $buttons = $('.mainHide');

    if ($buttons.css('display') != 'block') {
      $buttons.show();

      var firstClick = true;
      $(document).bind('click.myEvent', function(e) {
        if (!firstClick && $(e.target).closest('.mainHide').length == 0) {
          $buttons.hide();
          $(document).unbind('click.myEvent');
        }
        firstClick = false;
      });
    }

    e.preventDefault();
  });
});