Click outside of element to hide element

Question

My code does this: when element .pencil is clicked on, it toggles the hidden element .pencilpanel. When clicked outside of this .test element (there are two .test elements), then this .pencilpanel should hide.

However, my problems are that:

1) When the second .test element is clicked on, the first .test element remains visible when it should be hidden. And,

2) When the first .pencil element is clicked on, and its corresponding .pencilpanel is also clicked on, it will hide .pencilpanel, when it's supposed to remain visible. Any element that is currently visible within .test, and if clicked on, should not be hidden, unless that clicked on element lies outside of the current .test element.

So I'm not getting why when a click is made on .pencilpanel, it hides it on this line if(!$(this).closest('.test').length && $('.pencilpanel').is(":visible")) {. And the fact that the first .pencilpanel remains visible when it should be hidden whenever another .pencil is clicked on. This is my code:

$(document).ready(function () {
    $('.pencil').on('click', function (event) {
        event.stopPropagation();
        $(this).parent(".btsdiv").next(".fcmdiv").children(".pencilpanel").toggleClass("displayblock");
    });
});

$(document).ready(function () {
    $(document).click(function () {
        if (!$(this).closest('.test').length && $('.pencilpanel').is(":visible")) {
            $('.pencilpanel').removeClass("displayblock");
        }
    });
});

.pencilpanel {
    display: none;
}

.displayblock {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
    <div class="btsdiv">
        <div class="pencil">&#9998;</div>
    </div>
    <div class="fcmdiv">
        <div class="pencilpanel">
            <textarea></textarea>
        </div>
    </div>
</div>

<div class="test">
    <div class="btsdiv">
        <div class="pencil">&#9998;</div>
    </div>
    <div class="fcmdiv">
        <div class="pencilpanel">
            <textarea></textarea>
        </div>
    </div>
</div>

Answer 1

$(document).ready(function () {
$('.pencilpanel').hide();
    $('.pencil').on('click', function (event) {
        event.stopPropagation();
        var elm=$(this).parent(".btsdiv").next(".fcmdiv").children(".pencilpanel");
        $('.pencilpanel').not(elm).hide();
        if(elm.css('display') == 'none') elm.css('display','inline-block');
        else elm.css('display','none');
    });
    
    $("*").on('click',function (event) {
        event.stopPropagation();
        if($(this).hasClass("pencil")) return;
        if($(this).hasClass("pencilpanel")) return;
        if($(this).parent().hasClass("pencilpanel")) return;
        $('.pencilpanel').hide();
    });
    
});

.pencil {
    cursor: pointer;
}

.pencil, .pencilpanel {
    display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
    <div class="btsdiv">
        <div class="pencil">&#9998;</div>
    </div>
    <div class="fcmdiv">
        <div class="pencilpanel">
            <textarea></textarea>
        </div>
    </div>
</div>
<div class="test">
    <div class="btsdiv">
        <div class="pencil">&#9998;</div>
     <br>
    </div>
    <div class="fcmdiv">
        <div class="pencilpanel">
            <textarea></textarea>
        </div>
    </div>
</div>

Answer 2

You can use the document.activeElement to check before you close the panels. Please find the modified code.

$(document).ready(function() {

  $('.pencil').on('click', function(event) {
    event.stopPropagation();
    closePanel();
    $(this).closest(".test").find(".pencilpanel").toggleClass("displayblock");
  });

  $(document).on("click", function() {
    if (document.activeElement.tagName != 'TEXTAREA')
      closePanel();
  });

});


function closePanel() {
  $('.pencilpanel').removeClass("displayblock");
}

.pencilpanel {
  display: none;
}

.displayblock {
  display: block;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="test">
  <div class="btsdiv">
    <div class="pencil">&#9998;</div>
  </div>
  <div class="fcmdiv">
    <div class="pencilpanel">
      <textarea></textarea>
    </div>
  </div>
</div>

<div class="test">
  <div class="btsdiv">
    <div class="pencil">&#9998;</div>
  </div>
  <div class="fcmdiv">
    <div class="pencilpanel">
      <textarea></textarea>
    </div>
  </div>
</div>

Answer 3

$(document).ready(function () {
  $('.pencil').on('click', function (event) {
    event.stopPropagation();
    $('.pencilpanel').removeClass("displayblock");
    $(this).parent().siblings().children(".pencilpanel").addClass("displayblock"); 
  });

  $(".pencilpanel").click(function () {
     event.stopPropagation();          
  });

  $(document).click(function () {
     $('.pencilpanel').not(":focus").removeClass("displayblock");        
  });    
});