toggle - Can I toggle an image with Jquery, yet have live text upon click?

Question

I'm not sure if my question makes sense, but,

I'm using jQuery to toggle an image from its off-state to its on-state upon click. That was hard enough to get to work (I'm rather novice). The problem is that the on-state is an image with a fair amount of body copy. It obviously does not look as good as it would if it were live type. I was wondering, if it's even possible, that the on-state be a div with live text that is hidden until the image is clicked.

I have no idea how to go about solving this problem as my knowledge of jQuery is rather limited.

The page is currently being hosted here

Script:

    <script type="text/javascript">
    $(function(){
        $("#click li").click(function (e) {
            $("#click li.selected").not(this).removeClass("selected");
            $(this).toggleClass("selected");
        });
    });
    </script>

Answer 1

您可以在每个li.

CSS：

.imagetext {
  display: none;
  height: 50px; /* or whatever */
  width: 50px;
}

#click li img {
  display: block;
  height: 50px; /* or whatever */
  width: 50px;
}
#click li.selected img {
  display: none;
}

#click .imagetext {
  display: block;
} 

HTML 大致如下：

<div id="#click">
  <ul>
    <li>
      <img src="..." />
      <div class="imagetext">Four score and seven...</div>
    </li>
    <!-- ... -->
  </ul>
</div>