jQuery - Show/Hide Conundrum -
so building glossary page, know, click a-z , shows words assocated letter below.
the problem is, have "word blocks" hiding get-go ($(".words").hide();) none of them being shown when click letters.
here html:
<div class="letterbar"> <a href="javascript:void(0)" class="letter" id="selector-a"> <span>a</span> </a> <a href="javascript:void(0)" class="letter" id="selector-b"> <span>b</span> </a> <a href="javascript:void(0)" class="letter" id="selector-c"> <span>c</span> </a> .... , on z </div> and html words shown below. (words removed, structure purposes.)
<div id="viewglossary"> <div class="words" id="glossary-a"> </div> <div class="words" id="glossary-b"> </div> <div class="words" id="glossary-c"> </div> </div> here show/hide javascript code:
$(document).ready(function(){ $(".words").hide(); $(".letter").click(function(){ var whichletter = $(this).children("span").text(); $(".words").fadeout(200, function(){ $(selectedgloss).fadein(); }); var selectedgloss = "#glossary-" + whichletter; console.log(selectedgloss); }); });
$(document).ready(function(){ $(".words").hide(); $(".letter").on('click', function(){ var sel = $('#glossary-' + this.id.replace('selector-','') ); $(".words").fadeout(200, function(){ sel.delay(200).fadein(200); }); }); });
Comments
Post a Comment