CODEWITHSUNDEEP
jqueryhtml
Alec Friedman
Alec Friedman

Reputation: 113

When i click the one active tab, I want all to appear. After, when i click the tab that I want, I want all others to disappear

When i click the one active tab, I want all to appear. After, when i click the tab that I want, I want all others to disappear.

I have attached my jfiddle as code, have tried can't figure it out.

Some help please.

https://jsfiddle.net/alecruckus/aq9Laaew/283716/

<script type="text/javascript">
    $(document).ready(function(){
        $('.nav-link').hide();
        $('.nav-link.active').show();
        $('.nav-link.active').click(function(){
          $('.nav-link').addClass('opened');
          $('.nav-link').show();
        });
        $('.nav-link.opened').click(function(){
          $('.nav-link').removeClass('opened');
          $('.nav-link').hide();
          $('.nav-link.active').show();
        });

    });
    </script>

Upvotes: 3

Views: 55

Answers (2)

chiconese
chiconese

Reputation: 325

Try this way (I didn't understand very well what are you trying to do):

var showingAll = false;

$('.nav-link ').hide();    
$('.nav-link.active').show();


$('.nav-link').on('click', function(){
    if( $(this).hasClass('active') ) {
        $('.nav-link').toggle();
        $(this).show();
        showingAll = true;              
    } else if ( showingAll == true ) {
      $('.nav-link').hide();    
      $(this).show();
    }
});

Demo: https://jsfiddle.net/aq9Laaew/283767/

Upvotes: 0

slider
slider

Reputation: 12990

I think the problem is that your second click listener isn't attached (because there are no elements with the opened class then). You can change your click listener to the following:

$('.nav-link').click(function() {
    if ($(this).hasClass('active')) {
        $('.nav-link').show();
    } else {
        $('.nav-link').hide();
        $(this).show();
    }
});

Demo: https://jsfiddle.net/p9v2mxLe/

Upvotes: 1

Related Questions