We help IT Professionals succeed at work.
Get Started

Closing drop down tab by clicking outside.

Adebayo Ojo
Adebayo Ojo asked
on
265 Views
Last Modified: 2017-12-03
Please I need someone to help me with this. I've tried to fix it but not working as expected. I want to close a drop down tab by clicking both the tab button and outside the tab. I was able to open the drop down by clicking on the tab button and close it by clicking outside the tab, but I cannot close the tab by clicking on the tab button. Below are my codes:

HTML
<div id="notify" style="display:inline-block; cursor:pointer;">'.'<img id="note_still" src="images/note_still.png" width="31" height="30" alt="Notes">
<div id="notecontainer" class="notecontainer" style="display:none; border:solid 1px lightslategray; margin-top:2px;">';
<div id="notedisplay" class="notedisplay">'.$notify_result.'</div>';
<div id="spanBase" style="height:40px; width:300px; background-color:gray; text-align:center;"><a style="color:white; font-weight:800;" href="">View all notifications</a></div>
</div>
</div>

Open in new window


JavaScript/JQuery
//**********Function for notification drop-down menu*******//

$(document).ready(function() {
    $("#notify").click(function() {
        $("#notecontainer").show();
    });
});
// Close the dropdown menu if the user clicks outside of it
window.addEventListener('mouseup', function(event) {
    var box = document.getElementById('notecontainer');
    if (event.target != box && event.target.parentNode != box) {
        box.style.display = 'none';
    }
});
//***************Ends Here*********************************//

Open in new window


I tried to add another jquery to hide the dropdown on clicking the tab icon(
img id="note_still" src="images/note_still.png"

Open in new window

but the dropdown refused to even open up when I applied the script.
Comment
Watch Question
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2017
Commented:
This problem has been solved!
Unlock 1 Answer and 7 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE