Collapsed Button Needs pressing twice

[ScoobyDont]

Hi
 
I am creating a site using bootstrap and have a few collapsed panels, the trouble I am having is when the page first loads the down arrow needs pressing twice before it does anything, can this be fixed 
 
 
js

$(document).on('click', '.panel-heading span.clickable', function(e){
    var $this = $(this);
	if(!$this.hasClass('panel-collapsed')) {
		$this.parents('.panel').find('.panel-body').slideUp();
		$this.addClass('panel-collapsed');
		$this.find('i').removeClass('fa fa-arrow-up').addClass('fa fa-arrow-down');
	} else {
		$this.parents('.panel').find('.panel-body').slideDown();
		$this.removeClass('panel-collapsed');
		$this.find('i').removeClass('fa fa-arrow-down').addClass('fa fa-arrow-up');
	}
})

And this is the code for the header

<div class="panel-heading">
     <span class="pull-right clickable"><i class="fa fa-arrow-down" aria-hidden="true"></i></span>
     <h4><i class="fa fa-calendar" aria-hidden="true"></i> Important Events </h4>
     </div>

Thanks for any help in advance

[Strider64]

I think you're confusing what is clickable and what is not:

https://jsfiddle.net/Strider64/db8NB/

 

While that isn't the same thing it should show you what I'm talking about.

$(function () {

    var myButton1 = $('.myButton1'), // The Button:
        box1 = $('.box1'),
        myButton2 = $('.myButton2'),
        box2 = $('.box2');

    myButton1.on('click', function () {

        $(this).toggleClass('off');
        if ($(this).hasClass('off')) {
            moveRight(); // Animate Box to the Right:
        } else {
            moveLeft(); // Move Box back to the Original Position:
        }
    });

    myButton2.hover(function () {
        box2.animate({
            'left': '300px'
        });
        $(this).css('background-color', 'orange');
    }, function () {
        box2.animate({
            'left': 0
        });
    });

    function moveLeft() {
        box1.animate({
            'left': 0
        });
    }


    function moveRight() {
        box1.animate({
            'left': '300px'
        });
    }