check options (radio-buttons)

allows you to select an option and then a different image/text will appear based on your choice

by Adam Kinnucane

HTML

<div class="wrapper">
  <div id="bottle-one" class="bottle">
    <img src="https://images-na.ssl-images-amazon.com/images/I/61jC%2Bv6qnUL._SY550_.jpg"           style="width:75px;height:150px;">
  </div>
  <div id="bottle-two" class="bottle">
    <img src="https://images-na.ssl-images-amazon.com/images/I/61jC%2Bv6qnUL._SY550_.jpg"           style="width:75px;height:150px;"></div>
  <div id="bottle-three" class="bottle">
    <img src="https://images-na.ssl-images-amazon.com/images/I/61jC%2Bv6qnUL._SY550_.jpg"           style="width:75px;height:150px;"></div>
  <div id="bottle-four" class="bottle">
    <img src="https://images-na.ssl-images-amazon.com/images/I/61jC%2Bv6qnUL._SY550_.jpg"           style="width:75px;height:150px;"></div>
  <br>
  <br>
  <div id="text-block1">
    THIS IS ONE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat velit vel suscipit       semper. Nullam feugiat dolor ut ante lacinia, eu convallis nibh luctus. Etiam porta augue       in feugiat vestibulum.
  </div>
    <div id="text-block2">
    THIS IS TWO Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat velit vel suscipit       semper. Nullam feugiat dolor ut ante lacinia, eu convallis nibh luctus. Etiam porta augue       in feugiat vestibulum.
  </div>
    <div id="text-block3">
    THIS IS THREE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat velit vel suscipit       semper. Nullam feugiat dolor ut ante lacinia, eu convallis nibh luctus. Etiam porta augue       in feugiat vestibulum.
  </div>
    <div id="text-block4">
     THIS IS FOUR Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat velit vel suscipit       semper. Nullam feugiat dolor ut ante lacinia, eu convallis nibh luctus. Etiam porta augue       in feugiat vestibulum.
  </div>
  <br>
  <div class="sections">
    <div class="section-one">
      <input type="radio" id="Choice1" class="selected"
     name="bottles1" value="1">
      <input...

CSS

.bottle {
  display: inline-block;
  padding: 2%;
}

.sections{
  display: block;
  width: 100%;
}

.section-one, .section-two{
  width:50%;
  display: initial;
}

#text-block1,#text-block2,#text-block3,#text-block4 {
  display: none;
}

#bottle-one,#bottle-two,#bottle-three,#bottle-four {
  opacity: 1;
}

.section-one {
  margin-left: 23%;
  position: relative;
}

JavaScript

function init_click() {
  $("input").on("click", function() {
  display();
  });
}
 
function display() {
  if($('input[value=3]').is(":checked") && $('input[value=1]').is(":checked")){
    $("#text-block2, #text-block3, #text-block4").hide();
    $("#text-block1").show();
    $("#bottle-two, #bottle-three, #bottle-four").css( "opacity", "0.5" );
    $("#bottle-one").css( "opacity", "1" );
  }

  if($('input[value=1]').is(":checked") && $('input[value=4]').is(":checked")){
    $("#text-block1, #text-block3, #text-block4").hide();
    $("#text-block2").show();
    $("#bottle-one, #bottle-three, #bottle-four").css( "opacity", "0.5" );
    $("#bottle-two").css( "opacity", "1" );
  }

  if($('input[value=2]').is(":checked") && $('input[value=3]').is(":checked")){
    $("#text-block1, #text-block2, #text-block4").hide();
    $("#text-block3").show();
    $("#bottle-two, #bottle-one, #bottle-four").css( "opacity", "0.5" );
    $("#bottle-three").css( "opacity", "1" );
  }

  if($('input[value=2]').is(":checked") && $('input[value=4]').is(":checked")){
    $("#text-block1, #text-block2, #text-block3").hide();
    $("#text-block4").show();
    $("#bottle-two, #bottle-three, #bottle-one").css( "opacity", "0.5" );
    $("#bottle-four").css( "opacity", "1" );
  } 
}
 
 init_click();