Question

I have a contact form that I’m trying to show/hide div’s and a class “open” to the clicked on tab.
It’s very basic, the user will click on either “Business request” or “Have a question?”.

When the contact form is first viewed by default “Business request” is displayed “open”. Clicking on “Have a question” will hide some div’s from the page.

<div class="contact_tab_container">
<div class="contact_tab business_request open">
  <p>Business request</p>
  <span>
  <p>Let’s work together!</p>
  </span> </div>
<div class="contact_tab have_a_question">
  <p>Have a question?</p>
  <span>
  <p>Ask us anything or just say Hi</p>
  </span> </div>

I want to add the class “open” when either is clicked and hide the following div’s when the “have_a_question” div is clicked: .contact_additional, .contact_budget, .attach_files

These div’s are displayed again when the “business_request” div is clicked.

Any ideas on how I can do this?

$(window).load(function() {
$('.have_a_question').toggle(function() {
$(this).addClass('open');
$('.business_request').removeClass('open');
return false;
},
function() {
$('.have_a_question').toggle(function() {
$(this).addClass('open');
$('.business_request').removeClass('open');
return false;
});
}); 
}); 

Answer 1

I think this will solve your problem.

$('.contact_tab_container').on('click', '.contact_tab', function(e){
    var target = $(e.currentTarget).addClass('open');
    target.siblings('.contact_tab').removeClass('open');

    if(target.is('.business_request ')){
        $('.contact_additional').show();
        $('.contact_budget').show();
        $('.attach_files').show();
    }else{
        $('.contact_additional').hide();
        $('.contact_budget').hide();
        $('.attach_files').hide();
    }
});