Change image on click with Bootstrap JS radio button

css, html, image, twitter-bootstrap

Solution

Here is the jsfiddle

Markup the images, and hide the second. Add the radio `btn-group` from your link

<div>
    <img src="http://www.google.com/images/icons/product/chrome-32.png" title="image 1" alt="image 1" id="image1" class="image-toggle" />
    <img src="http://www.google.com/images/icons/product/search-32.png" title="image 2" alt="image 2" id="image2" class="image-toggle" style="display:none;" />
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary image-toggler" data-image-id="#image1">
    <input type="radio" name="options" id="option1"> Show Image 1
  </label>
  <label class="btn btn-primary image-toggler" data-image-id="#image2">
    <input type="radio" name="options" id="option2"> Show Image 2
  </label>
</div>

After the inclusion of your js, add this

<script>
    $('.image-toggler').click(function(){
        $('.image-toggle').hide();
        $($(this).attr('data-image-id')).show();
    })
</script>

Problem

I'm using the latest version of Bootstrap and I want to use the javascript radio button to change between two pictures. I got two images, let say Image1 and Image2. Underneath I want to use a radio button with two options; "Show Image1" and "Show Image2". Image1 should be showed as default. When I push "Show Image2" Image1 should disappear and be replaced with Image2, if I push "Show Image1" after that, Image1 should be showed again. The appearance should be something like this: http://i.solidfiles.net/246a3403cb.png Is it possible to do this with html/css/js? I would really appreciate if someone could make an JS Fiddle and explain how to do this the best way. Using a css/html hack doesn't feel like a good way doing this... Twitter Bootstrap Radio Button (Scroll down to "Radio")

Original source