How do I hide other items while one item is visible?-CodePudding

Hello dear stackoverflow users. I'm trying to make a messages and notifications box with jquery. But for example, when I want to open the notification box while the message box is open, I want the other item to be hidden. I tried but failed.

MY CSS FRAMEWORK İS TAİLWİNDCSS

MY HTML CODE :

<div class="relative">
        <i id="messageIcon" data-message="6" class="fa fa-envelope cursor-pointer icon"></i>
        <div id="messageBox" class="absolute top-full left-0 mt-4 bg-white shadow-2xl text-black p-4" style="display: none;">
          hello world
        </div>
      </div>
      <div class="relative">
        <i id="notificationIcon" data-notification="3" class="fa fa-bell cursor-pointer icon"></i>
        <div id="notificationBox" class="absolute top-full left-0 mt-4 bg-white shadow-2xl text-black p-4" style="display: none;">
          hello world
        </div>
      </div>

MY JS CODE :

$(document).ready(function () {
    $("#messageIcon").on("click", function () {
        $("#messageBox").fadeToggle();
    });
    $("#notificationIcon").on("click", function () {
        $("#notificationBox").fadeToggle();
    });
    if ($("#messageBox").css("display") === "block") {
        $("#notificationBox").fadeOut();
    } else if ($("#notificationBox").css("display") === "block") {
        $("#messageBox").fadeOut();
    }
});

CodePudding user response：

Your if-else condition is only running at the moment of page reload. Now after that, when you click message box or notification box, the if-else condition is not running because if-else condition is not binded with any event.

So, you have to run if-else statement on the click event. So for this, you have to put if-else statement inside the function that is called on click event.

I modified your code. Try this code.

**$(document).ready(function () {
    $("#messageIcon").on("click", function () {
        BoxChecker();
    });
    $("#notificationIcon").on("click", function () {
        BoxChecker();
    });
    function BoxChecker(){
        if ($("#messageBox").css("display") === "block") {
            $("#notificationBox").fadeOut();
        } else if ($("#notificationBox").css("display") === "block") {
            $("#messageBox").fadeOut();
        }
    };

});**