Jquery and javascript element display changes seem to disable media queries for that element

Question

My media queries run just fine, but as soon as I click on the jquery element, media query for the clicked element stops working.

Media query: It's set up to hide and show the ul element based on device width. Works as intended

Jquery: Click on the span element("click here V") when the device width is less than 350px. This shows and hides the ul element. Works as intended

The problem: When I click the jquery element, and increase the window size the media query is not recognized. If I hide the menu with jquery it will stay hidden, and vice versa.

Any advice? I tried all I could think of, and did my research...I can't find the solution.

Here's the code:

var $menuContainer = $("#account-side-menu");
var $menuHeader = $menuContainer.find("h3");
var $menu = $menuContainer.find("ul");
var $downArrow = $menuContainer.find("span");

$(window).resize(function() {
    //check the size of the window to check if the click method should be added
    setMenuClick();
});

function setMenuClick(){
    //bind the click method to the h3 My account paragraph if the width is less than 350px
    if( $downArrow.is(":visible")){
        $menuHeader.unbind("click", toggleMenu);
        $menuHeader.bind("click", toggleMenu);
    } else {
        $menuHeader.unbind("click");
    }
}

setMenuClick();

function toggleMenu(){
    //$menu.toggle() //If you comment out the if statement and use this one it doesn't work either...
    if($menu.is(":visible")){
        $menu.hide();
    } else {
        $menu.show();
    }
}

@media (min-width: 200px){
	div#account-side-menu ul,
    div#account-side-menu span{
		display: inline-block;
	}
}

@media (min-width: 350px){
	div#account-side-menu ul{
		display: inline-block;
		list-style: none;
		margin: 0;
		padding: 10px 0;
		font-size: 17px;
	}
  
    div#account-side-menu span{
        display: none;
    }
}

<script      src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="account-side-menu">
    <h3>My Account <span> click here V</span></h3>
    <ul>
        <li><a href="#">Account Settings</a></li>
        <li><a href="#">My History</a></li>
        <li><a href="#">My Published Videos</a></li>
        <li><a href="#">Favorited Videos</a></li>
        <li><a href="#">Subcribtions</a></li>
    </ul>
</div>

Answer 1

Force showing the menu when the arrow is not visible with $menu.show();

Also bind/unbind is deprecated. use on/off instead. To know more read here: http://api.jquery.com/off/

function setMenuClick(){
    //bind the click method to the h3 My account paragraph if the width is less than 350px
    if( $downArrow.is(":visible")){
        $menuHeader.off("click", toggleMenu);
        $menuHeader.on("click", toggleMenu);
    } else {
        $menuHeader.off("click");
        $menu.show(); //force to show menu again
    }
}