title: Active attribute is not setting with the div's class
body: <p>I am trying to Create a inbox notification. It is successfully opening and closing. But it is only opening and closing when the open button is inside the div. But I am trying to open the notification when the <code>Open button</code> is <code>outside</code> the <code>panel div</code>, so I created an <code>onClick</code> event to <code>remove</code> and <code>open</code> <strong>active</strong> class. But when I click on <em>open Button</em> then it is not opening or closing:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" /&gt;
  
  &lt;div onClick="openInbox();"&gt;Open inbox Here(not working)&lt;/div&gt;
  
  &lt;div class="myNavbar"&gt;
      &lt;div class="navbar_right"&gt;
          &lt;myDiv class="myNotification" id="Notif"&gt;
          &lt;a class="icon_wrap" action=""&gt;&lt;i class="far fa-bell"&gt;&lt;/i&gt;&lt;/a&gt;
  
              &lt;div class="notification_dd"&gt;
                  This is Notification Div
              &lt;/div&gt;
          &lt;/myDiv&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>As you noticed, I am running a function named <code>openInbox</code> to set the <code>active</code> attribute with <code>myNotifiction</code>. But why is the div is not opening ?</p>