Toggle button not toggling when I use Blur() to hide popup when I clicking out of popup

Question

I`m trying to keep toggle button and $('#popup').blur together but unfortunately the trigger stops hiding. How can I solve this problem?

I have this trigger in header

$(document).ready(function() {
  $('#toggle').click(function() {
    // this alert always returns 'none'
    alert($('#popup').css('display'));
    if ($('#popup').css('display') == 'none') {
      $('#popup').show().focus();
    } else {
      $('#popup').hide();
    }
  });

  $('#popup').blur(function() {
    $(this).hide();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="trigger" id="toggle">
  <i class="las la-bell"></i>
</div>

When I`m checking Display this alert returns none in spite of Block.

alert($('#popup').css('display'));

Why does it happens? First of all, the code bellow should hide my popup anyway (no matter which element I click), And the thing is that the popup not hidden when it return display:none

$('#popup').blur(function() {
  $(this).hide();    
});

There is my code: https://codepen.io/webtm/pen/xxrOwMb

I've tried some resources but there is not solution. Toggle a popup and toggle it when clicked outside

Same happens when I use this example

$(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

Use jQuery to hide a DIV when the user clicks outside of it

Have you any idea?

Answer 1

At least I solved the issue.

Preview: https://codepen.io/webtm/pen/ExXyNRL

$(document).ready(function(){
    /* Now here we have different div classes for `show` and `hide` */
    $(document).on('click', '.npi_show', function(e){
        // Prevent propagination and prevent Default
        e.stopPropagation();
        e.preventDefault();
        // remove class which shows the popup
        $(this).removeClass('npi_show');
        // add class which hides the popup
        $(this).addClass('npi_hide');
        // Show the popup
        $('#popup').show();
    });
    
    // Hide popup by clicking to added class by previous clicking
    $(document).on('click', '.npi_hide', function(e){
        e.stopPropagation();
        e.preventDefault();
        // remove class which hides the popup
        $(this).addClass('npi_show');
        // add class which shows the popup
        $(this).removeClass('npi_hide');
        // Hide the popup
        $('#popup').hide();
    });
   
    $(document).click(function(){
        // Hide popup if we ain`t clicking on #toggle
        if($('body *').attr('id') != 'toggle'){
            // Here we copy paste the previous code
            // hide popup
            $("#popup").hide();
            // add class which shows the popup
            $('#toggle').addClass('npi_show');
            // remove class which hides the popup
            $('#toggle').removeClass('npi_hide');
        }
    });

   // To prevent hiding parrent element when clicking to child
   $('#npid_popup, #npid_popup *').click(function(e){
      e.stopPropagation();
      e.preventDefault();
   });

});

header{
    position: fixed;
    left:0;
    top:0;
    right:0;
    background: #fff;
    
    display: flex;
    justify-content: space-between;
  }
  header > div{
    padding: 15px;
    display: inline-block;
  }
  header > div:hover{
    background: #f2f2f2;
  }
  header > div > i{
    color: #333;
    font-size: 25px;
  }
  .trigger{
    border-bottom: 3px solid red;
  }
  .trigger i{
    color: red;
  }
  .notifications_popup{
    position: fixed;
    top: 60px;
    right: 6px;
    background: #fff;
    width: 300px;
    min-height: 300px;
    -webkit-box-shadow: -3px 5px 15px 2px #909090; 
    box-shadow: -3px 5px 15px 2px #909090;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<header>
    <div class="main">
        <i class="las la-home"></i>
    </div>
    <div class="npi_show" id="toggle">
        <i class="las la-bell"></i>
    </div>
</header>

<div class="notifications_popup p-5" tabindex="1" id="popup" style="display:none;">
    Notifications here...
</div>

<div class="jumbotron text-center">
  <h1>The problem solved</h1>
  <p>Solution for - Toggle popup and hiding by clicking out of it</p> 
</div>