active attribute is not setting with div's class

November 7, 2021

I am trying to Create a inbox notification. It is successfully opening and closing But is only opening and closing when open button is inside the div But I am trying to open the notification when the Open button is outside the panel div, So I created an onClick event to remove and open active class , But when i click on open Button then it is not opening or closing

// My onClick event

function openInbox() {
    gettingOpen = document.getElementsByTagName("myDiv");
    gettingOpen[0].setAttribute("myNotification","active");

}


// Previous script to open and close which is working fine

$(".myNotification .icon_wrap").click(function(){
  $(this).parent().toggleClass("active");
});

$(".show_all .link").click(function(){
  $(".myNotification").removeClass("active");
  $(".popup").show();
});

$(".close, .shadow").click(function(){
  $(".popup").hide();
});

$(".myB").click(function(){
  $(".myNotification").removeClass("active");
});

.myNavbar .navbar_left .logo a{
   font-family: 'Trade Winds';
   font-size: 20px;
}

.myNavbar .navbar_right{
   display: flex;
}

.myNavbar .navbar_right img{
  width: 35px;
}

.myNavbar .navbar_right .icon_wrap{
  cursor: pointer;
}

.myNavbar .navbar_right .myNotification{
  margin-left: 505px;
}

.myNavbar .navbar_right .myNotification .icon_wrap{
  font-size: 28px;
}

.myNavbar .navbar_right .myProfile,
.myNavbar .navbar_right .myNotification{
  position: relative;
}

.myNavbar .profile_dd,
.notification_dd{
  position: absolute;
  top: 18px;
  right: -10px;
  user-select: none;
  background: #fff;
  border: 1px solid #c7d8e2;
  width: 350px;
  padding: 3em;
  height: auto;
  display: none;
  border-radius: 3px;
  box-shadow: 10px 10px 35px rgba(0,0,0,0.125),
              -10px -10px 35px rgba(0,0,0,0.125);
}

.myNavbar .myProfile .profile_dd ul li .btn{
    height: 32px;
    padding: 7px 10px;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    background: #3b80f9;
    width: 125px;
    margin: 5px auto 15px;
}

.myNavbar .myProfile .profile_dd ul li .btn:hover{
  background: #6593e4;
}

.myNavbar .myProfile.active .profile_dd,
.myNavbar .myNotification.active .notification_dd{
  display: block;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" />


<div onClick="openInbox();">Open inbox Here(not working)</div>





<div class="myNavbar">
    <div class="navbar_right">
        <myDiv class="myNotification" id="Notif">
        <a class="icon_wrap" action=""><i class="far fa-bell"></i></a>

            <div class="notification_dd">
                This is Notification Div
            </div>
        </myDiv>
    </div>
</div>

As you noticed that I am running function named openInbox to set active attribute with myNotifiction But I have no idea why the div is not opening.

Any help would be much Appreciated. Thank You.

>Solution :

To add a CSS class, you don’t setAttribute, but to use element.classList

gettingOpen[0].classList.toggle("active");

// My onClick event

function openInbox() {
    gettingOpen = document.getElementsByTagName("myDiv");
    gettingOpen[0].classList.toggle("active");

}


// Previous script to open and close which is working fine

$(".myNotification .icon_wrap").click(function(){
  $(this).parent().toggleClass("active");
});

$(".show_all .link").click(function(){
  $(".myNotification").removeClass("active");
  $(".popup").show();
});

$(".close, .shadow").click(function(){
  $(".popup").hide();
});

$(".myB").click(function(){
  $(".myNotification").removeClass("active");
});

.myNavbar .navbar_left .logo a{
   font-family: 'Trade Winds';
   font-size: 20px;
}

.myNavbar .navbar_right{
   display: flex;
}

.myNavbar .navbar_right img{
  width: 35px;
}

.myNavbar .navbar_right .icon_wrap{
  cursor: pointer;
}

.myNavbar .navbar_right .myNotification{
  margin-left: 505px;
}

.myNavbar .navbar_right .myNotification .icon_wrap{
  font-size: 28px;
}

.myNavbar .navbar_right .myProfile,
.myNavbar .navbar_right .myNotification{
  position: relative;
}

.myNavbar .profile_dd,
.notification_dd{
  position: absolute;
  top: 18px;
  right: -10px;
  user-select: none;
  background: #fff;
  border: 1px solid #c7d8e2;
  width: 350px;
  padding: 3em;
  height: auto;
  display: none;
  border-radius: 3px;
  box-shadow: 10px 10px 35px rgba(0,0,0,0.125),
              -10px -10px 35px rgba(0,0,0,0.125);
}

.myNavbar .myProfile .profile_dd ul li .btn{
    height: 32px;
    padding: 7px 10px;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    background: #3b80f9;
    width: 125px;
    margin: 5px auto 15px;
}

.myNavbar .myProfile .profile_dd ul li .btn:hover{
  background: #6593e4;
}

.myNavbar .myProfile.active .profile_dd,
.myNavbar .myNotification.active .notification_dd{
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" />

<div onClick="openInbox();">Open inbox Here(not working)</div>

<div class="myNavbar">
    <div class="navbar_right">
        <myDiv class="myNotification" id="Notif">
        <a class="icon_wrap" action=""><i class="far fa-bell"></i></a>

            <div class="notification_dd">
                This is Notification Div
            </div>
        </myDiv>
    </div>
</div>