• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 314
  • Last Modified:

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.
0
Gurpreet Singh Randhawa
Asked:
Gurpreet Singh Randhawa
1 Solution
 
cb1393Commented:
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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now