jQuery: toggle / move dropdown arrow

I currently have a layout that looks like this: ...and I would like the little carat to move with my navbar selection. In other words, when I select "Information" I want the carat to move under information. I have accomplished the movement of the carat, but I cannot get the toggle-ing of its visibility to work.

jQuery

$(document).ready(function () {

    $(".navbar-link").on("click", function() {
        var el = $(this);
        var dd = el.siblings();

        var loc = el.offset();
        var left = loc.left;
        var width = el.width();
        var center = left + (0.5 * width);
        var corrected_center = center - 5;

        $(".arrow-up").css("left", corrected_center);

        if ( el.hasClass("arrow_up_visible") ) {
            $(".arrow-up").hide();
            el.removeClass("arrow_up_visible");
        } else {
            $(".arrow-up").show();
            el.addClass("arrow_up_visible");
        }
    });
});

html

<nav class="navbar navbar-default">
  <div class="container-fluid"> 
    <div class="row">
        <div class="col-md-2">
          <ul class="nav navbar-nav navbar-left">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Testimonials</a></li>
          </ul>
        </div>
        <div class="col-md-2">
          <ul class="nav navbar-nav navbar-left">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Locations</a></li>
          </ul>
        </div>
        <div class="col-md-4 text-center">
            <img src="smallw_red_shaddow_small.jpg" width="152" height="75" alt=""/>
        </div>
        <div class="col-md-2">
          <ul class="nav navbar-nav navbar-right">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Information</a></li>
            </ul>
        </div>
        <div class="col-md-2">
          <ul class="nav navbar-nav navbar-right">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Sign In</a></li>
          </ul>
        </div>
      </div>
</div>
</nav>

css

.navbar {
    border: none;
}

.navbar-link {
    text-align: center;
}

.banner-box {
    background: #009FB2;
    left: 0;
    top: 75px;
    height: 35%;
    width: 100%;
    color: #000000;
    position: fixed;
}
.banner-title {
    margin-left: 116px;
    margin-top: 38px;
    font-family: open-sans;
    font-style: normal;
    font-weight: 300;
}

.dropdown-nav {
    z-index: 1000;
    margin-left: 0;
    position: fixed;
    top: 75px;
    background-color: #FDA220;
    color: #000000;
    width: 100%;
    left: 0px;
    display: inline;
    height: 30px;
    display: none;
}

.dropdown-nav-link {
    text-align: center;
    line-height: 30px;
    list-style-type: none;
    color: #000000;
    text-decoration: none;
}

.dropdown-menu > li {
    top: 39px;
    /* [disabled]width: 152px; */
}

.dropdown-menu-down {
    display: inline;
}

.drop-it {
    color: white;
    background: black;
}

.dropdown-link-a {
    color: #000000;
}

.dropdown-link-a:hover {
    color: #000000;
    font-weight: 700;
    text-decoration: none;
}
.navbar-link-header {
    color: #E7292A;
}

.navbar-link-header:hover {
    color: #E7292A;
    font-weight: 700;
}

.arrow_up_visible {
}

.arrow-up {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #FDA220;
    z-index: 1000;
    left: 1011px;
    position: absolute;
    top: 66px;
    display: none;
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid #f00;
}

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;

    border-left: 60px solid green;
}

.arrow-left {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 

    border-right:10px solid blue; 
}

This toggling "works" but isn't accomplishing what I'd like. Ideally, when I click a different navbar link, the carat should simply move, and not disappear, and while the carat moves, the arrow_up_visible class should be removed from the previous link.

I haven't made a fiddle for this, but I can try to if that would make it much easier to assist me.

Thanks

Solution

I created this before you posted your markup but the idea is essentially the same (if I understand you question correctly).

$(document).ready(function () {

    $(".navbar-link").on("click", function() {
        var el = $(this);
        var dd = el.siblings();

        var loc = el.offset();
        var left = loc.left;
        var width = el.width();
        var center = left + (0.5 * width);
        var corrected_center = center - 5;
      
        var isActive = el.hasClass('active');
		$(".navbar-link").removeClass('active');
        
        $(".arrow-up").css("left", corrected_center);
        
        if (isActive) {
            $('.arrow-up').hide();
        } else {
            $('.arrow-up').show();
            el.addClass('active');
        }
        
    });
});

.navbar {
    position: relative;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    display: block;
    float: left;
    text-align: center;
    width: 25%;
}

.active {
  color: rd;
}

.arrow-up {
    position: absolute;
    background: orange;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    top: 20px;
    left: 0;
    display: none;
    /* important bit... */
    transition: all .5s ease;
}

.active {
    color: red;
}

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

<nav class="navbar">
    <ul>
        <li><a href="#" class="navbar-link">Link</a></li>
        <li><a href="#" class="navbar-link">Link</a></li>
        <li><a href="#" class="navbar-link">Link</a></li>
        <li><a href="#" class="navbar-link">Link</a></li>
    </ul>
    <div class="arrow-up"></div>
</nav>