Show hide the title on click of the image

Please see the previous selected answer, want to hide the title when plus is clicked and vice versa.
LVL 16
Gurpreet Singh RandhawaWeb DeveloperAsked:
Who is Participating?
 
cb1393Connect With a Mentor Commented:
Here's the modified script...
<!DOCTYPE html>
<html>
<head>
	<style>
	div.header {border:1px solid gray;}
	div.info {border:1px solid red;}
  img {align:absmiddle;}
	</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>

  <script>
  function showInfo(img){
  		$(img).hide();
      $("img:nth-child(2)",img.parentNode).show();
      $("div.info",img.parentNode.parentNode).show();
      $("span.titletext",img.parentNode.parentNode).hide();
  }
  function hideInfo(img){
  		$(img).hide();
      $("img:nth-child(1)",img.parentNode).show();
      $("div.info",img.parentNode.parentNode).hide();
      $("span.titletext",img.parentNode.parentNode).show();
  }
  </script>

</head>
<body>

<table width=400px>
<tr>
<td>
	<div class=header>
	<img src="http://investor.toromont.com/common/images/directory_plus.gif" onClick="showInfo(this)">
	<img src="http://investor.toromont.com/common/images/directory_minus.gif" onClick="hideInfo(this)" style="display:none;">
	<span class=titletext>Title 1</span>
	</div>
	<div id=div1 style="display:none" class=info>Some more detail here... Some more detail here... Some more detail here... Some more detail here... Some more detail here... </div>
</td>
<tr>

<tr>
<td>
	<div class=header>
	<img src="http://investor.toromont.com/common/images/directory_plus.gif" onClick="showInfo(this)">
	<img src="http://investor.toromont.com/common/images/directory_minus.gif" onClick="hideInfo(this)" style="display:none;">
	<span class=titletext>Title 2</span>
	</div>
	<div id=div2 style="display:none" class=info>Some more detail here... Some more detail here... Some more detail here... Some more detail here... Some more detail here... </div>
</td>
<tr>

<tr>
<td>
	<div class=header>
	<img src="http://investor.toromont.com/common/images/directory_plus.gif" onClick="showInfo(this)">
	<img src="http://investor.toromont.com/common/images/directory_minus.gif" onClick="hideInfo(this)" style="display:none;">
	<span class=titletext>Title 3</span>
	</div>
	<div id=div3 style="display:none" class=info>Some more detail here... Some more detail here... Some more detail here... Some more detail here... Some more detail here... </div>
</td>
<tr>
</table>

</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.