CODEWITHSUNDEEP
jqueryhtmlcss
Janath
Janath

Reputation: 1248

jQuery toggle with active class

I have a menu with "yes / no" options just like this.

enter image description here

The red color box containing word "yes" is my active button. I just want to show another options when users click yes. So I used jQuery toggle function.

When page load, it showing menu with options just like this.

enter image description here

But I don't want to show it until users click yes. I figured out the problem. It happened because yes button has an active class activated. That's why it showing its options. And also I need to hide that toggle menu options when click no.

I tried with jquery hide functions adding another class to no. It seems ok but expert advice needed. 

$(".remove-toggle").click(function(){
 $(".wrap").hide();
});

Working jsfiddle here.

Upvotes: 0

Views: 2467

Answers (3)

James Douglas
James Douglas

Reputation: 3446

Yes, what you have looks fine, except that clicking 'yes' twice will hide and show, and you don't want that. To solve that, use fadeIn instead of fadeToggle for the .click() JQuery function.

To solve the other problem, use this CSS:

.wrap {
  display: none;
}

And remove the active class from the 'yes' button. See this:

$('.btn-switch').click(function() {
    var $group = $(this).closest('.form-group');
    $('.btn-switch', $group).removeClass("active");
    $(this).addClass("active");
  });
  $(".activate-toggle").click(function() {
    $(".wrap").fadeIn();
  });
  $(".remove-toggle").click(function() {
    $(".wrap").fadeOut();
  });
.btn-switch.active {
  background: #e46a5d!important;
  color: #fff;
  font-weight: normal;
  text-shadow: none;
}
.wrap {
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="member" class="col-md-5 col-sm-12 control-label">
    Do you have the car right now?
  </label>
  <div class="col-lg-10">
    <div class="btn-group">
      <button type="button" class="btn btn-default btn-switch activate-toggle"> <span class="goods">Yes</span>
      </button>
      <div class="btn-group">
        <button type="button" class="btn btn-default btn-switch remove-toggle"><span class="services">No</span>
        </button>
      </div>
    </div>
  </div>
</div>

<div class="wrap">
  <div class="form-group">
    <label for="lastname" class="col-md-5 col-sm-12 control-label">Qualification type</label>
    <div class="col-lg-7 col-md-7 col-sm-12 form-input">
      <input type="text" class="form-control input-std" id="qualification-type">
    </div>
  </div>
</div>

Upvotes: 2

Gerard
Gerard

Reputation: 15786

Is this what you need?
- the active class was removed from the HTML element. So white will be the starting background color for both buttons.
- the element with the .wrap class is hidden by default.
- Instead of making .wrap visible via jQuery, I defined a class with animation and use jQuery to add and remove the class when necessary.

  $('.btn-switch').click(function() {
    var $group = $(this).closest('.form-group');
    $('.btn-switch', $group).removeClass("active");
    $(this).addClass("active");
  });

  $(".activate-toggle").click(function() {
    $(".wrap").addClass('animate-wrap-show');
  });

  $(".remove-toggle").click(function() {
    $(".wrap").removeClass('animate-wrap-show');
  });
.wrap {
  opacity: 0;
  transition: all 1s ease;
}
.btn-switch.active {
  background: #e46a5d!important;
  color: #fff;
  font-weight: normal;
  text-shadow: none;
}
.animate-wrap-show {
  opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="member" class="col-md-5 col-sm-12 control-label">
    Do you have the car right now?
  </label>
  <div class="col-lg-10">
    <div class="btn-group">
      <button type="button" class="btn btn-default btn-switch activate-toggle"> <span class="goods">Yes</span>
      </button>
      <div class="btn-group">
        <button type="button" class="btn btn-default btn-switch remove-toggle"><span class="services">No</span>
        </button>
      </div>
    </div>
  </div>
</div>

<div class="wrap">
  <div class="form-group">
    <label for="lastname" class="col-md-5 col-sm-12 control-label">Qualification type</label>
    <div class="col-lg-7 col-md-7 col-sm-12 form-input">
      <input type="text" class="form-control input-std" id="qualification-type">
    </div>
  </div>
</div>

Upvotes: 1

Quasar
Quasar

Reputation: 100

Just add this css.

.wrap {
   display: none;
 }

Then, the .wrap class will not be visible at the beginning itself.

Here is the fiddle - https://jsfiddle.net/jkLank8b/12/

Upvotes: 2

Related Questions