JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/wandoledzep/bxslider/master/jquery.bxSlider.min.js"></script>
<div class="slider">
<ul id="sample">
<li>
<div class="questions">
Question 1<br />
<p>
<label><input type="radio" name="secret" class="noAction" />No</label>
<label><input type="radio" name="secret" class="yesAction" />Yes</label>
</p>
</div>
<div class="actions">
<div id="noAction" style="display: none;">
<p>Thank you.</p>
</div>
<div id="yesAction" style="display: none;"><a href="" id="go-next1">Go to Question 2</a></div>
</div>
</li>
<li>
<div class="questions">
Question 2<br />
<p>
<label><input type="radio" name="secret" class="noAction1" />No</label>
<label><input type="radio" name="secret" class="yesAction1" />Yes</label>
</p>
</div>
<div class="actions">
<div id="noAction1" style="display: none;">
<p>Thank you.</p>
</div>
<div id="yesAction1" style="display: none;"><a href="" id="go-next2">Go to Question 3</a></div>
</div>
</li>
<li>
<div class="questions">
Question 3<br />
<p>
<label><input type="radio" name="secret" class="noAction3" />No</label>
<label><input type="radio" name="secret" class="yesAction3" />Yes</label>
</p>
</div>
<div class="actions">
</div>
</li>
</ul>
<div id="noAction3" style="display: none;">
<p>Thank you.</p>
</div>
<div id="yesAction3" style="display:...
CSS
.questions p {
margin: 10px;
}
JavaScript
$(function() {
var slider = $('#sample').bxSlider({
infiniteLoop: false,
controls: false
});
$('#go-next1').click(function(){
slider.goToNextSlide();
return false;
});
$('#go-next2').click(function(){
slider.goToNextSlide();
return false;
});
$(':radio').change(function() {
var item = '#' + $(this).attr('class');
$(item).show();
});
});