CODEWITHSUNDEEP
javascripthtmlcssonclicktoggle
Jack Scott
Jack Scott

Reputation: 119

How do I switch the appearance of a button onClick?

I have created a button: '.switch' , which switches between two divs '.gi' and '.nogi' - this works well, but what I cannot seem to get working is for the .switch appearance itself to change upon clicking.

I've tried functions using toggle and toggleClass, neither of which work for me yet.

the page is live on https://www.novagrappling.com/rules.html

You will notice there are two buttons, one with GI highlighted in red, the other with NOGI highlighted. Ideally I wanted Gi highlighted initially, with NOGI hidden, which switches onClick along with the div underneath. Thanks

$('div.nogi, div.switched').hide();
$(".switch").on("click", function() {
  $('div.gi, div.nogi').toggle();
  $('div.switch, div.switched').toggle();
});
.switch,
.switched {
  margin: auto;
  display: block;
  width: 120px;
  height: 40px;
}

.gi-switch {
  display: inline-block;
  float: left;
  width: 50%;
  height: 40px;
  background: #cd3046;
  border-radius: 15px 0px 0px 15px;
  cursor: pointer;
}

.gi-switched {
  display: inline-block;
  float: left;
  width: 50%;
  height: 40px;
  background: #232528;
  border-radius: 15px 0px 0px 15px;
  cursor: pointer;
}

.nogi-switch {
  display: inline-block;
  float: right;
  width: 50%;
  height: 40px;
  background: #232528;
  border-radius: 0px 15px 15px 0px;
  cursor: pointer;
}

.nogi-switched {
  display: inline-block;
  float: right;
  width: 50%;
  height: 40px;
  background: #cd3046;
  border-radius: 0px 15px 15px 0px;
  cursor: pointer;
}
<a class="switch">
  <div class="gi-switch">
    <div class="gi-title">GI</div>
  </div>
  <div class="nogi-switch">
    <div class="nogi-title">NO GI</div>
  </div>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 1

Views: 62

Answers (1)

Zach Woods
Zach Woods

Reputation: 556

I'm not sure why .toggleClass() didn't work for you. You can use it like this:

$('.switch .gi-switch').toggleClass('gi-switched');
$('.switch .nogi-switch').toggleClass('nogi-switched');

If you add this to your onclick function, you should get something close to what you want.

$('div.nogi').hide();
$(".switch").on("click", function() {
  $('div.gi, div.nogi').toggle();
  $('.switch .gi-switch').toggleClass('gi-switched');
  $('.switch .nogi-switch').toggleClass('nogi-switched');
});
.switch,
.switched {
  margin: auto;
  display: block;
  width: 120px;
  height: 40px;
}

.gi-switch {
  display: inline-block;
  float: left;
  width: 50%;
  height: 40px;
  background: #cd3046;
  border-radius: 15px 0px 0px 15px;
  cursor: pointer;
}

.gi-switched {
  display: inline-block;
  float: left;
  width: 50%;
  height: 40px;
  background: #232528;
  border-radius: 15px 0px 0px 15px;
  cursor: pointer;
}

.nogi-switch {
  display: inline-block;
  float: right;
  width: 50%;
  height: 40px;
  background: #232528;
  border-radius: 0px 15px 15px 0px;
  cursor: pointer;
}

.nogi-switched {
  display: inline-block;
  float: right;
  width: 50%;
  height: 40px;
  background: #cd3046;
  border-radius: 0px 15px 15px 0px;
  cursor: pointer;
}
<a class="switch">
  <div class="gi-switch">
    <div class="gi-title">GI</div>
  </div>
  <div class="nogi-switch">
    <div class="nogi-title">NO GI</div>
  </div>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 1

Related Questions