CODEWITHSUNDEEP
javascriptjqueryfadein
Rafael
Rafael

Reputation: 35

Disable click in other divs if one has been clicked already

This is my jsfiddle : https://jsfiddle.net/2ajo5jdx/

If you click on link-b a div fade-in,now if you click on link-c another div fadeIn too.I don't want more than one div at the same time.I want to disable click on link-c if link-b has been clicked already.

Is there a simple way?Thank you.

$('.b').on("click", function(e) {
    e.preventDefault();
    $('.a-div').fadeOut( 400, function(){
        $('.b-div').addClass('active');
        $('.b-div').fadeIn(400);         
    });
});
$('.c').on("click", function(e) {
    e.preventDefault();
    $('.a-div').fadeOut( 400, function(){
        $('.c-div').addClass('active');
        $('.c-div').fadeIn(400);
    });
});

Upvotes: 2

Views: 140

Answers (2)

ivanfg
ivanfg

Reputation: 178

To add almost nothing to your code, you could use a flag, set it to true on each click in a link and to false on close

var some_link_opened = false;

$('.b').on("click", function(e) {
    if (some_link_opened) return;
    some_link_opened = true;
    e.preventDefault();
    $('.a-div').fadeOut( 400, function(){
        $('.b-div').addClass('active');
        $('.b-div').fadeIn(400);         
    });
});

$('.x').on("click", function(e) {
    some_link_opened = false;
    e.preventDefault();
    $('.active').fadeOut( 400, function(){
        $('this').removeClass('active');
        $('.a-div').fadeIn(400);
    });
});

Upvotes: 2

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

I'm not sure if that what you mean, but if you want to show just one div every time you can use the following solutio based on active class.

Hope this helps.

  $('.b').on("click", function(e) {
        e.preventDefault();
        $('.active').fadeOut( 400, function(){
            $('.active').removeClass('active');
            $('.b-div').addClass('active');
            $('.b-div').fadeIn(400);         
        });
    });
    $('.c').on("click", function(e) {
        e.preventDefault();
        $('.active').fadeOut( 400, function(){
            $('.active').removeClass('active');
            $('.c-div').addClass('active');
            $('.c-div').fadeIn(400);
        });
    });
    
     $('.x').on("click", function(e) {
        e.preventDefault();
        $('.active').fadeOut( 400, function(){
            $('this').removeClass('active');
            $('.a-div').fadeIn(400);
        });
    });
.b-div,.c-div{
  
  display:none;
}

.x {
  color:red;
}

.b,.c,.x{
  
  cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="b">link-b</a>
<a class="c">link-c</a>
<a class="x">x</a>

<div class="a-div active">aaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="b-div">bbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div class="c-div">ccccccccccccccccccccccccccc</div>

Upvotes: 1

Related Questions