Jquery does not run correctly

Question

I’m creating a sidebar that will contain some accessibility options. The big one is, in parts the sidebar is working properly.

1º By clicking on the accessibility icon, the sidebar opens normally, if you click on the icon again, it closes and if you click once more, the sidebar opens, so on... ok.

2º Inside the sidebar was added an "X" button to close the sidebar, the goal is to hide the accessibility icon when the sidebar is open and the user must close the sidebar with the "X". By clicking on the accessibility icon, the sidebar opens, if the "X" is clicked, the sidebar closes normally, but if I click again on the accessibility icon to open the sidebar, it no longer opens. I tried to understand what could be going on, but I couldn’t, does anyone have any idea what’s going on? Link to the example: https://jsfiddle.net/wmosquini/ko3ttLtp/19/

HTML:

<a class="abriracessibilidade" accesskey="0" title="Acessibilidade"><i class="uk-icon-wheelchair"></i></a>
<div class="menuacessibilidade">
    <div class="">
        <div class="uk-flex uk-flex-right">
            <a class="via-close">X</a>
        </div>
        <a href="#body" accesskey="1" title="Menu">Menu</a>
        <a href="#tm-top-b" accesskey="2" title="">Top b</a>
        <a href="#tm-top-c" accesskey="3" title="">Top c</a>
        <a href="#tm-top-d" accesskey="4" title="">Top d</a>
        <a href="#tm-main" accesskey="5" title="">Main</a>
        <a href="#tm-bottom-a" accesskey="6" title=""></a>
        <a href="#tm-bottom-b" accesskey="7" title=""></a>
        <a href="#tm-bottom-c" accesskey="8" title=""></a>
        <a href="#tm-bottom-d" accesskey="9" title=""></a>
    </div>
</div>

CSS:

.menuacessibilidade {
  position: fixed;
  top: 3em;
  left: 0;
  width: 30%;
  height: 100%;
  background-color: #FFF;
  text-align: center;
  overflow: auto;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
}
.menuacessibilidade.open {
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
.menuacessibilidade.close {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%)
}

Jquery:

$(function () {
  $('.abriracessibilidade').on('click', function () {
    $('.menuacessibilidade').toggleClass('open');
  });
});

$(function () {
  $('.via-close').on('click', function () {
    $('.menuacessibilidade').toggleClass('close');
  });
});

Answer 1

$(function () {
  $('.abriracessibilidade, .via-close').on('click', function () {
    $('.menuacessibilidade').toggleClass('open');
  });
});

.menuacessibilidade {
  position: fixed;
  top: 3em;
  left: 0;
  width: 30%;
  height: 100%;
  background-color: #FFF;
  text-align: center;
  overflow: auto;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
}
.menuacessibilidade.open {
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
.menuacessibilidade.close {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/uikit.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css">
<a class="abriracessibilidade" accesskey="0" title="Acessibilidade"><i class="uk-icon-wheelchair"></i></a>
<div class="menuacessibilidade">
    <div class="">
        <div class="uk-flex uk-flex-right">
            <a class="via-close">X</a>
        </div>
        <a href="#body" accesskey="1" title="Menu">Menu</a>
        <a href="#tm-top-b" accesskey="2" title="">Top b</a>
        <a href="#tm-top-c" accesskey="3" title="">Top c</a>
        <a href="#tm-top-d" accesskey="4" title="">Top d</a>
        <a href="#tm-main" accesskey="5" title="">Main</a>
        <a href="#tm-bottom-a" accesskey="6" title=""></a>
        <a href="#tm-bottom-b" accesskey="7" title=""></a>
        <a href="#tm-bottom-c" accesskey="8" title=""></a>
        <a href="#tm-bottom-d" accesskey="9" title=""></a>
    </div>
</div>

The question is in the ToogleClass, when you put close. Try to use it that way

Answer 2

Missed you remove the class close before giving a toggleClass("open"), also failed to remove class open when giving a toggleClass("close").

Your code should look like this:

$(function () {
  $('.abriracessibilidade').on('click', function () {
    $('.menuacessibilidade').removeClass("close").toggleClass('open');
  });

    $('.via-close').on('click', function () {
    $('.menuacessibilidade').removeClass("open").toggleClass('close');
  });
});

Answer 3

Just do it on your script, do not need all this code to perform the same function.

$('.abriracessibilidade, .via-close').on('click', function () {
    $('.menuacessibilidade').toggleClass('open');
});

Understanding the problem

By clicking on Icon he applies the style open, if you click again it removes the style.

$(function () {
  $('.abriracessibilidade').on('click', function () {
    $('.menuacessibilidade').toggleClass('open');
  });
});

Here it goes the same thing as the first, only instead of removing the style open he applies the close-up, where the problem arises, because the style open still applied.

$(function () {
  $('.via-close').on('click', function () {
    $('.menuacessibilidade').toggleClass('close');
  });
});