Expand/Collapse jQuery menu - selectors

I', trying to build an expanding/collapsing menu.

I have a main navigation bar, with 3 submenu's inside. By default the submenu's are 50px height - but once clicked on, this height changes to 200px. Click on it again to make it collapse back to the original 50px.

What bothers me is when I have subMenu1 expanded, and I go expand subMenu2 - subMenu1 stays expanded, and I'd like it to collapse as the second sub menu is selected.

Here's my code;

<!DOCTYPE html>
<html>
<head>
    <title>projectFive</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>




    </div>
</div>
<div class="sideMenu">

    <div class="sideButton">&#9776;</div>
    <div class="profilePic"></div>

    <div class="menuButtonHolder">


        <div class="menuButton">
            <a class="menuButtonIcon" href="#"><img src="./img/rightArrow.png" id="arrow" alt=""><span>link</span></a>
            <div class="subMenu"></div>
        </div><!--  ending toggle button -->


    <div class="menuButton">
            <a class="menuButtonIcon" href="#"><img src="./img/rightArrow.png" id="arrow" alt=""><span>link</span></a>
            <div class="subMenu"></div>
        </div><!--  ending toggle button -->


    <div class="menuButton">
            <a class="menuButtonIcon" href="#"><img src="./img/rightArrow.png" id="arrow" alt=""><span>link</span></a>
            <div class="subMenu"></div>
        </div><!--  ending toggle button -->


    </div> <!-- ending menu button holder -->

</div>
<!-- ending side menu
 -->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="my.js" type="text/javascript"></script>
</body>
</html>

and the jQuery:

$(document).ready(function(){


    var $menuButton = $(".sideButton");
    var $menuBar = $(".sideMenu");
    var $profilePic = $(".profilePic");

    $menuButton.click(function(){
        if ($(this).hasClass("active")){

            $profilePic.fadeOut(200);
            $profilePic.css({"width": "25px", "height": "25px", "transition": "width 0.3s linear, height 0.3s linear"}, 500);

            $(".menuButtonHolder").css({
                "top": "1000px", 
                "transition": "top .4s ease-out"});

            $menuBar.animate({width: "60px"}, 500);
            $menuBar.css({"background-color": "rgba(0,0,0,0.9)"});
            $menuButton.removeClass("active");



        } else {

            $profilePic.fadeIn(500);
            $profilePic.css({"width": "150px", "height": "150px", "transition": "width 0.7s linear, height 0.7s linear"}, 500);

            $(".menuButtonHolder").css({
                "top": "0px", 
                "transition": "top .8s ease-out"});

            $menuBar.animate({width: "300px"}, 800);
            $menuBar.css({"background-color": "rgba(0,0,0,0.5)", "transition": "background-color .5s linear"});
            $menuButton.addClass("active");
        }


});


$(".menuButtonIcon").click(function(){


        if ($(this).hasClass("filter")){

            $(this).find("#arrow").css({"-webkit-transform": "rotate(90deg)", "transition": "transform 0.5s ease-out"});
            $(this).css({"height": "50px", "transition": "height 0.5s ease-out"});
            $(this).removeClass("filter");





        } else {
            $(this).find("#arrow").css({"-webkit-transform": "rotate(180deg)", "transition": "transform 0.5s ease-out"});
            $(this).css({"height": "200px", "transition": "height 0.5s ease-out"});
            $(".menuButtonIcon").addClass("filter");
        }


});


});

I'd like to know what function or what to use to make sure that once any of the submenu's are clicked - it siblings collapse if there's one expanded.

I hope my code if enough info to give you guys an idea.

Thanks in advance!

Solution

Try moving your submenu collapse logic into a separate function and calling it with the relevant elements in your click event function, like this:

function collapse($elements) {
  $elements.removeClass("filter");
  $elements.find("#arrow").css({"-webkit-transform": "rotate(90deg)", "transition": "transform 0.5s ease-out"});
  $elements.css({"height": "50px", "transition": "height 0.5s ease-out"});
}

$(".menuButtonIcon").click(function(){
  if ($(this).hasClass("filter")){
    collapse($(this));
  } else {
    $(this).find("#arrow").css({"-webkit-transform": "rotate(180deg)", "transition": "transform 0.5s ease-out"});
    $(this).css({"height": "200px", "transition": "height 0.5s ease-out"});
    $(this).addClass("filter");
    collapse($(".menuButtonIcon").not($(this)));
  }
});

This will collapse the menu item if it has a class of "filter" and collapse everything besides the clicked menu item if it doesn't but other items might.

Here's a crude example of it in action: http://codepen.io/nrbernard/pen/doqwLr