Q:

Changing icon colors and based on which item is selected. working snippet included

I'm hoping someone can help me finish up my code.
I'm basically trying to have icons change when certain item is clicked. Then when the icon is clicked, it animates up and down at the same time changing icon images.
I'm ALMOST there. You'll notice an issue when you click through the items, then when you reach item 3, the toggle automatically opens and closes. 
Please see my snippet and see if you guys can help me tighten this thing up.

//CHANGE COLOR

function changeColor1() {
  $('.jumbotron').css('background-color', '#6aabcb');
  $('.topBar').css('background-color', '#bdd2f1');
  $('.topBarInner').css('background-image', 'url(http://www.ericnguyen23.com/images/host/arrow-up.png)');
}

function changeColor2() {
  $('.jumbotron').css('background-color', '#e4b028');
  $('.topBar').css('background-color', '#ffce4e');
  $('.topBarInner').css('background-image', 'url(http://www.ericnguyen23.com/images/host/arrow-up-yellow.png) ');
}

function changeColor3() {
  $('.jumbotron').css('background-color', '#6990f4');
  $('.topBar').css('background-color', '#4e7fff');
  $('.topBarInner').css('background-image', 'url(http://www.ericnguyen23.com/images/host/arrow-up-darkblue.png)');
}

$(document).ready(function() {
  $('.navLink').on('click', function() {
    var id = this.id;
    switch (id) {
      case 'nav1':
        $(".topBarInner").click(function(event) {
          event.preventDefault();

          if ($(this).hasClass("clicked")) {
            $("#contentContainer").stop().animate({
              marginTop: "0px"
            }, 200);
            $(".jumbotron, .headerRow").show(200);
            $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up.png)");
          } else {
            $("#contentContainer").stop().animate({
              marginTop: "160px"
            }, 200);
            $(".jumbotron, .headerRow").hide(200);
            $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down.png)");
          }

          $(this).toggleClass("clicked");
          return false;

        });
        break;
      case 'nav2':
        $(".topBarInner").click(function(event) {
          event.preventDefault();

          if ($(this).hasClass("clickedYellow")) {
            $("#contentContainer").stop().animate({
              marginTop: "0px"
            }, 200);
            $(".jumbotron, .headerRow").show(200);
            $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up-yellow.png)");
          } else {
            $("#contentContainer").stop().animate({
              marginTop: "160px"
            }, 200);
            $(".jumbotron, .headerRow").hide(200);
            $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down-yellow.png)");
          }

          $(this).toggleClass("clickedYellow");
          return false;

        });
        break;
      case 'nav3':
        $(".topBarInner").click(function(event) {
          event.preventDefault();

          if ($(this).hasClass("clickedYellow")) {
            $("#contentContainer").stop().animate({
              marginTop: "0px"
            }, 200);
            $(".jumbotron, .headerRow").show(200);
            $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up-darkblue.png)");
          } else {
            $("#contentContainer").stop().animate({
              marginTop: "160px"
            }, 200);
            $(".jumbotron, .headerRow").hide(200);
            $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down-darkblue.png)");
          }

          $(this).toggleClass("clickedBlue");
          return false;

        });
        break;
    }
  });
});
.headerRow {
  padding: 52px 0;
  position: relative;
}

.jumbotron {
  margin-top: -10px;
  padding: 175px 0 0px 0;
  background-color: #6aabcb;
  color: white;
  position: relative;
}

.topBar {
  height: 11px;
  width: 98%;
  background-color: #bdd2f1;
  position: absolute;
  bottom: 20px;
}

.topBarInner {
  background-image: url(http://www.ericnguyen23.com/images/host/arrow-up.png);
  background-repeat: no-repeat;
  background-size: contain;
  height: 28px;
  width: 28px;
  margin: 0 auto;
}

.clicked {
  background-image: url(http://www.ericnguyen23.com/images/host/arrow-down.png);
}

.clickedYellow {
  background-image: url(http://www.ericnguyen23.com/images/host/arrow-down-yellow.png);
}

.clickedBlue {
  background-image: url(http://www.ericnguyen23.com/images/host/arrow-down-darkblue.png);
}
<div class="container">
  <div class="row headerRow">
    <a href="#"><img src="http://www.ericnguyen23.com/images/host/logo.jpg" /></a>
  </div>
</div>

<div class="jumbotron"></div>

<div id="contentContainer">
  <div class="row">
    <div class="col-xs-12">
      <div class="topBar">
        <div class="topBarInner"></div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12">
      <ul>
        <li><a href="javascript:;" onclick="changeColor1()" id="nav1" class="navLink">Item 1</a></li>
        <li><a href="javascript:;" onclick="changeColor2()" id="nav2" class="navLink">Item 2</a></li>
        <li><a href="javascript:;" onclick="changeColor3()" id="nav3" class="navLink">Item 3</a></li>
      </ul>
    </div>
  </div>
</div>
<!--/container-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

A:

Here there are two problems.

You need to unbind the click event
In case "nav3", you are checking if ($(this).hasClass("clickedYellow")). It should be if ($(this).hasClass("clickedBlue")).
Move out the logic to attach the click event outside of switch statement.

Complete code:

function changeColor1() {
    $('.jumbotron').css('background-color','#6aabcb');
    $('.topBar').css('background-color','#bdd2f1');
    $('.topBarInner').css('background-image','url(http://www.ericnguyen23.com/images/host/arrow-up.png)');
}

function changeColor2() {
    $('.jumbotron').css('background-color','#e4b028');
    $('.topBar').css('background-color','#ffce4e');
    $('.topBarInner').css('background-image','url(http://www.ericnguyen23.com/images/host/arrow-up-yellow.png) ');
}
    
function changeColor3() {
    $('.jumbotron').css('background-color','#6990f4');
    $('.topBar').css('background-color','#4e7fff');
    $('.topBarInner').css('background-image','url(http://www.ericnguyen23.com/images/host/arrow-up-darkblue.png)');
}

$(document).ready(function(){
 var id = 'nav1';
    $('.navLink').on('click', function () {
  id = this.id;
   });
  $(".topBarInner").unbind('click');
  $(".topBarInner").click( function(event){
   event.preventDefault();
   switch(id) {
  case 'nav1':
    if ($(this).hasClass("clicked")) {
     $("#contentContainer").stop().animate({marginTop:"0px"}, 200); 
     $(".jumbotron, .headerRow").show(200); 
     $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up.png)");
    } else {
     $("#contentContainer").stop().animate({marginTop:"160px"}, 200);
     $(".jumbotron, .headerRow").hide(200); 
     $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down.png)");
    } 

    $(this).toggleClass("clicked");
    break;
  case 'nav2':
    if ($(this).hasClass("clickedYellow")) {
     $("#contentContainer").stop().animate({marginTop:"0px"}, 200); 
     $(".jumbotron, .headerRow").show(200); 
     $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up-yellow.png)");
    } else {
     $("#contentContainer").stop().animate({marginTop:"160px"}, 200);
     $(".jumbotron, .headerRow").hide(200); 
     $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down-yellow.png)");
    } 

    $(this).toggleClass("clickedYellow");

    break;
  case 'nav3':
    if ($(this).hasClass("clickedBlue")) {
     $("#contentContainer").stop().animate({marginTop:"0px"}, 200); 
     $(".jumbotron, .headerRow").show(200); 
     $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up-darkblue.png)");
    } else {
     $("#contentContainer").stop().animate({marginTop:"160px"}, 200);
     $(".jumbotron, .headerRow").hide(200); 
     $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down-darkblue.png)");
    } 

    $(this).toggleClass("clickedBlue");
    break;
    
   }
  });
}); 
.headerRow{
 padding:52px 0;
    position: relative;
 } 
    
.jumbotron {
 margin-top:-10px;
 padding:175px 0 0px 0;
 background-color:#6aabcb;
 color: white;
 position:relative;
 }
    
.topBar{
 height:11px;
 width:98%;
 background-color:#bdd2f1;
 position:absolute;
 bottom:20px;
 }
 
.topBarInner{
 background-image: url(http://www.ericnguyen23.com/images/host/arrow-up.png);
 background-repeat: no-repeat;
 background-size:contain;
 height:28px;
 width:28px;
 margin:0 auto;
 }
    
.clicked{
 background-image: url(http://www.ericnguyen23.com/images/host/arrow-down.png);
 }
    
.clickedYellow{
 background-image: url(http://www.ericnguyen23.com/images/host/arrow-down-yellow.png);
 }
    
.clickedBlue{
 background-image: url(http://www.ericnguyen23.com/images/host/arrow-down-darkblue.png);
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
 <div class="row headerRow">
        <a href="#"><img src="http://www.ericnguyen23.com/images/host/logo.jpg"/></a> 
    </div>  
</div>

<div class="jumbotron"></div>

<div id="contentContainer">   
 <div class="row">
        <div class="col-xs-12">
            <div class="topBar"><div class="topBarInner"></div></div>  
        </div>
    </div>
    
    <div class="row">
     <div class="col-xs-12">
            <ul> 
                <li><a href="#" onclick="changeColor1()" id="nav1" class="navLink">Item 1</a></li>   
                <li><a href="#" onclick="changeColor2()" id="nav2" class="navLink">Item 2</a></li>    
                <li><a href="#" onclick="changeColor3()" id="nav3" class="navLink">Item 3</a></li>    
            </ul>     
       </div>
    </div> 
</div><!--/container-->

