Já que os dois elementos usam o mesmo evento, pode agrupar os dois no mesmo seletor, e utilizar um ternário para alterar os valores, verificando com $(this)
qual o elemento que disparou o evento e se ele tem a classe .openbtn
: se tiver aplica o primeiro argumento do ternário, caso contrário o segundo.
$('.openbtn, .closebtn').click(function(event) {
event.preventDefault();
// quem disparou o evento tem a classe .openbtn?
var el = $(this).hasClass('openbtn');
$('.sidebar').css('width', el ? '250px' : '0');
$('#lista-torneios').css('margin-left', el ? '250px' : '0');
});
Veja que na variável el
estou verificando se o botão que disparou o evento tem a classe .openbtn
. Com isso o valor de el
será um booleano true
ou false
, que será usado posteriormente no ternário (caso não saiba o que é uma operação ternária, clique aqui).
Exemplo:
$('.openbtn, .closebtn').click(function(event) {
event.preventDefault();
// quem disparou o evento tem a classe .openbtn?
var el = $(this).hasClass('openbtn');
$('.sidebar').css('width', el ? '250px' : '0');
$('#lista-torneios').css('margin-left', el ? '250px' : '0');
});
.sidebar{
background: red;
width: 0;
transition: width .5s;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">div</div>
<button class="openbtn">Abre</button>
<button class="closebtn">Fecha</button>