How do I toggle two different images?

Question

How do I toggle two different images with Bootstrap? I want them to act as radio buttons, but I also want them to change images, indicating one is "active" and one isn't.

My page: http://matthewtbrown.com/test/imageasbutton/

code snippet

    .btn .btn-primary .active .thisweek   {
 padding: 0px;
 border-left-width: 0px;
 border-right-width: 0px;
 border-top-width: 0px;
 border-bottom-width: 0px;
 content:url(../images/thisweek.png);
    }

    .btn .btn-primary .thisweek   {
 padding: 0px;
 border-left-width: 0px;
 border-right-width: 0px;
 border-top-width: 0px;
 border-bottom-width: 0px;
 content:url(../images/thisweek_inactive.png);
    }

    .btn .btn-primary .active .alltime   {
 padding: 0px;
 border-left-width: 0px;
 border-right-width: 0px;
 border-top-width: 0px;
 border-bottom-width: 0px;
 content:url(../images/thisweek.png);
    }

    .btn .btn-primary .alltime   {
 padding: 0px;
 border-left-width: 0px;
 border-right-width: 0px; 
 border-top-width: 0px;
 border-bottom-width: 0px;
 content:url(../images/alltime_inactive.png);
    }

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active thisweek">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> <img src="images/thisweek.png" width="108" height="27" style="float: left" alt=""/>
    </label>
    <label class="btn btn-primary alltime">
    <input type="radio" name="options" id="option2" autocomplete="off"><img src="images/alltime_inactive.png" width="259" height="27" alt=""/>
    </label>
  
    </div>

There are a lot of content already available in SO..I am including the links here--[http://stackoverflow.com/questions/17541614/use-image-instead-of-radio-button] [http://stackoverflow.com/questions/3896156/how-do-i-style-radio-buttons-with-images-laughing-smiley-for-good-sad-smiley/3896259] — neophyte, Mar 04 '17 at 16:53
Possible duplicate of [Use Image instead of radio button](http://stackoverflow.com/questions/17541614/use-image-instead-of-radio-button) — neophyte, Mar 04 '17 at 16:55

score 0 · Answer 1 · answered Mar 04 '17 at 16:50

Please try this code and see if it's what you are looking for

$("input:radio[name='options1']").click(function() {
  $(".pic1").toggleClass("show");
  $(".pic2").removeClass("show");
});
$("input:radio[name='options2']").click(function() {
  $(".pic2").toggleClass("show");
  $(".pic1").removeClass("show");
});

.pic1,
.pic2 {
  display: none;
}

.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons">
  <label class=" active thisweek">
    <input type="radio" name="options1" autocomplete="on">
  </label>
  <label class=" alltime">
    <input type="radio" name="options2" autocomplete="on">
  </label>
</div>
<div class="row images">
  <div class="col-md-6">
    <img class="pic1" src="https://unsplash.it/200/300/?random" width="100" height="100" alt="" />
  </div>
  <div class="col-md-6">
    <img class="pic2" src="https://unsplash.it/g/200/300" width="100" height="100" alt="" />
  </div>
</div>

How do I toggle two different images?

1 Answers1