theRealAlexz switching to to other cases
by Fogest
HTML
<div class="readmore" id="books">Books</div>
<div class="readmore" id="ebooks">Ebooks</div>
<h5 class="questioncard">Read about <a class="showdiv" href="#div1">books</a> or <a class="showdiv" href="#div2">ebooks</a>?</h5>
<!-- commented out in case needed for later. <div class="questioncard readmore" id="ebooks">Read more about <a class="showdiv2" href="#div2">ebooks?</a></div>
<div class="questioncard readmore" id="books">Read more about <a class="showdiv1" href="#div1">books?</a></div>
<div class="readmore" id="elsediv">Do you want to distribute?</div>
-->
CSS
.readmore {
display:none;
}
JavaScript
jQuery(function ($) {
var books = false, ebooks = false;
$(".questioncard").on("click", "a", function () {
var text = $(this).text();
if (text === "books") books = true;
else if (text === "ebooks") ebooks = true;
if (books && !ebooks) {
$(".questioncard").html('Read more about <a class="showdiv" href="#div2">ebooks</a>?');
$("#books").show();
$("#ebooks").hide();
} else if (ebooks && !books) {
$(".questioncard").html('Read more about <a class="showdiv" href="#div1">books</a>?');
$("#books").hide();
$("#ebooks").show();
}
if (books && ebooks) {
$(".questioncard").html("Do you want to distribute?");
$("#books").show();
$("#ebooks").show();
}
});
/*
$('.showdiv1').click(function() {
$('.questioncard').hide();
$('div[id^=div]').hide();
$('#div1').show();
$(this).data('clicked', true);
if($('.showdiv2').data('clicked')){
$('#elsediv').show();
}else{
$('#pushdiv2').show();
}
});
$('.showdiv2').click(function() {
$('.questioncard').hide();
$('div[id^=div]').hide();
$('#div2').show();
$(this).data('clicked', true);
if($('.showdiv1').data('clicked')){
$('#elsediv').show();
}else{
$('#pushdiv1').show();
}
});
*/
});