JQuery Hide on page load with 'starts with', can't unhide later -

i want hide div when load page. dynamic div though gets assigned class name, , number added based on other criteria.

so have this.

$(function() {   $("[class^='myclass']").hide(); }); 

problem is, later, when try show div, want show 1 of them. try this.

$(document).ready(function() {   $("[class^='showdiv']").click(function() {     // use showdiv value (array index) specific     //  class need show      $(".myclass2").show();    }); }); 

problem is, doesn't show class. think because 'hide' function hiding starting 'myclass'. , kind of overrides when try show specific '.myclass2' since being hidden earlier hide.

i can't unset hide though. otherwise of elements show up.

i'm lost here.

thanks.

edit

i tried this, , works.

instead of hiding @ beginning, this.

$(function() {       $("[class^='myclass']").each(function( index ) {           $(".myclass" + index).hide();       });      }); 

and works fine. i'm pretty sure hiding class begining 'wild card' problem is..

is there better solution this?

how this? one-to-one relation sample

jsfidle

javascript:

$(function() {     $('.myclass').hide();      $('.showdiv').click(function() {         var index = $('.showdiv').index(this);          $('.myclass:eq(' + index + ')').toggle();     }); }); 

html:

<div>     <div class="showdiv">showdiv</div>     <div class="showdiv">showdiv</div>     <div class="showdiv">showdiv</div> </div>  <div>     <div class="myclass">myclass 1</div>     <div class="myclass">myclass 2</div>     <div class="myclass">myclass 3</div> </div>