[Solved] How to make different video answers in list of questions?

by


Set every video to display:none, then use jQuery to display the needed item once some user action is taken. In my example I used .click()

Basic example:

$(".options>li").click(function() {
  $(".view").css('display', 'none')
});

$("li.aaa").click(function() {
  $(".view.aaa").css('display', 'block')
});

$("li.bbb").click(function() {
  $(".view.bbb").css('display', 'block')
});

$("li.ccc").click(function() {
  $(".view.ccc").css('display', 'block')
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  width: 90vw;
  margin: 0 auto;
  align-items: center;
}

.panel {
  display: inline-block;
  width: 50%;
}

.view {
  max-width: 100%;
  display: none;
  border: 1px solid red;
}

.options>li {
  width: 100%;
  background: grey;
  list-style: none;
  margin: .25em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">

  <div class="panel right">
    <ul class="options">
      <li class="aaa">aaa</li>
      <li class="bbb">bbb</li>
      <li class="ccc">ccc</li>
      <li class="ddd"></li>
      <li class="eee"></li>
    </ul>
  </div>


  <div class="panel left">
    <img src="http://fruitandvegetablesmelbourne.com.au/wp-content/uploads/2015/04/golden-delicious-apples.jpg" class="view aaa">
    <img src="http://img.aws.livestrongcdn.com/ls-article-image-400/cpi.studiod.com/www_livestrong_com/photos.demandstudios.com/56/251/fotolia_5712687_XS.jpg" class="view bbb">
    <img src="http://timesofindia.indiatimes.com/thumb/msid-49502853,width-400,resizemode-4/49502853.jpg" class="view ccc">
  </div>

</div>

1

solved How to make different video answers in list of questions?