I am developing an interactive questionnaire that functions like a 'create your own adventure' story. The questions are shown or hidden depending on the user's responses. Below is the HTML code:
<!-- TIER 3
================================================== -->
<!--From Steak/Fries-->
<div id="SteakFries" class="hide">
<p>I'd rather...</p>
<span class="responseRead"><img class="prompt" src="http://fakeimg.pl/50" data-respnseto="Read">Read a Best-Seller on the Beach</span>
<span class="responseExplore"><img class="prompt" src="http://fakeimg.pl/50" data-respnseto="Explore">Explore Ancient Ruins & Natural Wonders</span>
</div>
<!--From Chamagne/Caviar
To travel style-->
<!--From Gastro-->
<div id="GastroPubs" class="hide">
<p>I'd rather...</p>
<span class="responseExplore"><img class="prompt" src="http://fakeimg.pl/50" data-respnseto="Explore">Explore Ancient Ruins & Natural Wonders</span>
<span class="responseVisitCity"><img class="prompt" src="http://fakeimg.pl/50" data-respnseto="VisitCity">Visit City Landmarks & Theatres</span>
</div>
<!--From Wine/Cheese-->
<div id="GastroPubs" class="hide">
<p>I'd rather...</p>
<span class="responseVisitCity"><img class="prompt" src="http://fakeimg.pl/50" data-respnseto="VisitCity">Visit City Landmarks & Theatres</span>
<span class="responseRelaxParadise"><img class="prompt" src="http://fakeimg.pl/50" data-respnseto="RelaxParadise">Relax in an Over-Water Bungalo in Paradise</span>
</div>
<!--opens these divs-->
<!-- TIER 4 (Styles Discover)
================================================== -->
<!--From VisitCity-->
<div id="VisitCity" class="culturalChameleon hide">
Cultural Chameleon
</div>
<!--From Champagne/VisitCity-->
<div id="RelaxParadise" class="fiveStar hide">
Five-Star Fanatic
</div>
<!--From Explore-->
<div id="Explore" class="activeAdventurer hide">
Active Adventurer
</div>
<!--From Read/VisitCity-->
<div id="Read VisitCity" class="sunSeeker hide">
Sun Seeker
</div>
<!--================================================== -->
</div>
Based on the link clicked in Tier 3, the corresponding div in Tier 4 is displayed. This functionality is achieved with the following jQuery code:
var data = "";
$('.prompt').click(function(){
data = $(this).attr('data-respnseto');
console.log(data);
$('.hide').hide();
$('#' + data).fadeIn(600);
});
However, there is an issue with displaying the last item in Tier 4 when clicking either of the links in Tier 3 that have the attributes:
data-respnseto="Read"
data-respnseto="VisitCity"
Currently, the code only looks for one ID to display in Tier 4. Any suggestions on how to display item 4 in Tier 4 when the user clicks either of the links in Tier 3? Your help would be greatly appreciated.