How can I reset my dropdown-menu when click on other button?

Question

I have a dropdown-menu and 2 btns(AP,SP) in the same row.

I chose Geary, Mia on the drop-down menu, I want to reset it to ClassView when I press on a different btn.

Note: ClassView is my default selection.

---

HTML

for dropdown-menu

<div id="dd" class="wrapper-dropdown-1" tabindex="1"> <span>Class View </span>
    <ul class="dropdown">
        <li><a id="class-view" href="#">Class View</a></li>
        <li><a id="student#1" class="student" href="#">Geary, Mia</a></li>
    </ul>
</div>

---

Below is what I have now :

Fiddle

Any hints ?

Answer 1

You can try

$("#btn-assignment").click(function(){
    $(".dropdown li").eq(0).trigger("click");
});

This will trigger 'click' onto the first LI element, which should reselect it

I attached this event to the 'Assignment Performance' button

http://jsfiddle.net/2v57wnys/1/

Answer 2

Thanks to @Sushil and @emmaaaah for get me thinking at the right direction.

I'm sure that there is more than 1 way to accomplish this such task, but here how I did mine. I

---

Create

a function called : classViewReset()

function classViewReset() {
    $student.removeClass('active');
    $classView.removeClass('active');
    $('#dd').find('span').text('Class View');
}

---

Call it back

on all my onClick(); functions.

$btnAssignment.click(function(e) {
    e.preventDefault();
    classViewReset(); //<----------------- Call
    imgLoader({btn: $btnAssignment, }); 
});

Now my dropdown-menu is reset properly as I wanted. See it live : here