javascript - Define "display" css property upon jQuery/JS toggle


Keywords:javascript 


Question: 

I'm toggling between two divs with jQuery (I'm new to jQuery...) and I want both divs to use the display: flex property. I'm able to assign it to the first/default toggle (Option 1), but the second toggle (Option 2) defaults to display: block, and I'm not sure how to hook onto that.

Any insight would be so helpful - thanks!

Here's a jsfiddle:

HTML

<div class="pricing-switcher">
    <a class="toggle active" id="HS-College">High School and College</a>
    <a class="toggle" id="Club-Youth">Club and Youth</a>
</div>

<div class="pricing-wrapper">
    <div class="panels HS-College">Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1</div>
    <div class="panels Club-Youth">Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2</div>
</div>

CSS

.panels {
    display: none;
    padding-bottom: 30px;
}

.panels.HS-College {
    display: flex;
    justify-content: center;
}

.panels.Club-Youth {
    display: flex;
    justify-content: center;
}    

.pricing-switcher {
    float: left;
    width: 100%;
}

.toggle {
    float: left;
    display: block;
    border: 2px solid #000;
    margin-right: 10px;
    cursor: pointer;
}

.toggle.active {
    background-color: red;
}

jQuery

$(document).ready(function() {
    $('.toggle').click(function(){
        var self = $(this);    
        $('.panels').hide();    
        if(self.hasClass('active') ) {
            self.removeClass('active');
            $('.panels.HS-College').fadeIn();
        }else{
            $('.toggle').removeClass('active');
            self.addClass('active');
            $('.panels.'+ self.attr('id')).fadeIn();
        }
    });
});

4 Answers: 

You are not assigning the css to the other panel. So it has default block display.

.panels.HS-College, .panels.Club-Youth {
  display: flex;
  justify-content: center;
}

here is the updated fiddle

 

A little tough to say if this is what you are looking for, but try merging these two rules:

.panels {
    display: none;
    padding-bottom: 30px;
}

.panels.HS-College {
    display: flex;
    justify-content: center;
}

into one rule:

.panels {
    padding-bottom: 30px;
    display: flex;
    justify-content: center;
}
 

Instead of using AddClass and RemoveClass you can simply call:

.toggleClass()

Jquery Ref here:

Which will remove the class if existing and add if not.

 

I think this will help you to solve the problem...

In your CSS file Add below property for Club-Youth div class also...add this code snippet to your CSS.

.panels.Club-Youth {
    display: flex;
    justify-content: center;
}

And the resultant CSS code will be...

.panels {
    display: none;
    padding-bottom: 30px;
}

.panels.HS-College {
    display: flex;
    justify-content: center;
}
.panels.Club-Youth {
    display: flex;
    justify-content: center;
}
.pricing-switcher {
    float: left;
    width: 100%;
}

.toggle {
    float: left;
    display: flex;
    border: 2px solid #000;
    margin-right: 10px;
    cursor: pointer;
}

.toggle.active {
    background-color: red;
}