Button action after clicking - jQuery

Question

Button action after clicking - jQuery

Navigation

#1 by (1 votes)

0

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

See 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:

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

Making the modal come to the home position by appearing on the screen. How can I do this?

javascript jquery css modal

asked by anonymous 01.10.2015 / 00:57

1 answer

Foreign key registry query with multiple occurrences How to break page using mPDF

score 1 · Accepted Answer

Well, as I understand it, 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><ahref="#" 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 to - .bt-slide because it makes more sense, but you can change it later to your preference.