Button action after clicked - jQuery

Question

I have a button that when clicked it closes the modal, in fact it does an action with CSS doing the div disappear, just getting the button to be clicked again and open the modal. However I am not able to create a new action on the same button, but now to open it.

Look at the code below:

$(document).ready(function(){
    $(".bt-fechar").click(function(e){
        e.preventDefault();
        $(".box-preco").css("right", "-245px");
    });
});

After the first click that closes the modal, the second click should do the following action:

$(".box-preco").css("right", "0");

Causing the modal to come to the starting position appearing on the screen. How can I do this?

Answer 1

Well, from what I understand, you want to create a "slider" effect to show/hide a div when a button is clicked. Then you can do it as follows:

$(document).ready(function(){
    // Se tiveres outro botão ou outro "Trigger" para ser usado, modifica a linha abaixo para por exemplo: $('.bt-fechar, .outraClassFecha').click(function(){
    $('.bt-slide').click(function(){
    var hidden = $('.box-preco');
    if (hidden.hasClass('visible')){
        hidden.animate({"left":"-245px"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"left":"0px"}, "slow").addClass('visible');
    }
    });
});

.box-preco {
    width:150px;
    height:300px;
    position:absolute;
    left:-245px;
    background-color:cadetblue;
    color:#fff;
}

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

<a href="#" class="bt-slide">Deslizar Painel</a>
<div class="box-preco">Caixa escondida!</div>

I changed the name of the button class that used to be - .bt-fechar for - .bt-slide because it makes more sense, but you can change that later to your preference.