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);         });     });  }); 

fiddle


Comments

Popular posts from this blog

.htaccess - First slash is removed after domain when entering a webpage in the browser -

Automatically create pages in phpfox -

c# - Farseer ContactListener is not working -