I have the following html:

<ul>

  <li><img src="./images/ccp.jpg" id="image"></li>        

  <div class="acj" >
  <li class="gec">text</li>
  <li class="gec">text</li>
  <li class="gec">text</li>
  <li class="gec">text</li>

  </div>

</ul>

 

I have a style which hides the list to begin with:

<style>

.gec{
 display:none;
}

</style>

 

I want to show the list when the image is clicked on and I'm using the following code:

 

$(document).ready(function () {
 $("#image").click(
  
  function () { 
     $(".ccp .gec").show()

   });

});

This isn't working. Could someone please explain why and what the correct code should be? 

 

Many thanks.