Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Expanding an d Collaping a Value inside a Div

Posted on 2011-04-22
15
Medium Priority
?
402 Views
Last Modified: 2012-05-11
Hi i have the following scenarion in which suppose

A Plus Sign here <div id="showSummary">The data i am showing here is just 20 characters</div>

when i click the Plus sign

at the same place the following div should expand and show the full data

<div id="showSummary">All data shown show here now</div> and vice-versa.

this is just for one column TD in a tr

and then counting rows but only in one TD of each TR
0
Comment
  • 7
  • 7
15 Comments
 
LVL 7

Expert Comment

by:bill30
ID: 35450338
First you need to change the div id's to be different.  An id should always be unique, if you want to items to share css attributes use a class="blabla" modifier.    The code should look something like this
<!DOCTYPE html>
<html>
<head>
  <style>
  p { width:400px; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <button>Toggle</button>

  <p>
    The data i am showing here is just 20 characters
  </p>
  <p style="display:none">
  All data shown show here now
  </p>
<script>
    $("button").click(function () {
      $("p").slideToggle("slow");
    });
</script>

</body>
</html>

Open in new window

0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35452138
good,

i want to apply the + and the - minues images also, eqach td has different ID in as p as:

<p id="count_#counter#" style="display:none">  <p>

so how it will work for different td single handedly
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 35454627
here is a working sample
<!DOCTYPE html>
<html>
<head>
	<style>
	div {border:1px solid gray;}
  img {align:absmiddle;}
	</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
  <script>
  var imgPlus = "http://investor.toromont.com/common/images/directory_plus.gif";
  var imgMinus = "http://investor.toromont.com/common/images/directory_minus.gif";
  
  function toggleInfo(img){
    if (img.src==imgPlus) {
      img.src=imgMinus;
      $("div",img.parentNode).show();
    } else {
      img.src=imgPlus;
      $("div",img.parentNode).hide();
    }
  }
  </script>
</head>
<body>

<table width=400px>
<tr>
<td>
	<img src="http://investor.toromont.com/common/images/directory_plus.gif" onClick="toggleInfo(this)">Title 1
	<div id=div1 style="display:none">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>
	<img src="http://investor.toromont.com/common/images/directory_plus.gif" onClick="toggleInfo(this)">Title 2
	<div id=div2 style="display:none">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>
	<img src="http://investor.toromont.com/common/images/directory_plus.gif" onClick="toggleInfo(this)">Title 3
	<div id=div3 style="display:none">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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35464535
Thanks hainkurt,

There are many div in my application so i replaced the div tag with h4, i think this will not cause any issues!

when i run this page single handed, it runs perfect!

When i embedd this page in my main page it throws me an error "OBJECT EXPECTED" and that too on the the following line!

 <img src="http://investor.toromont.com/common/images/directory_plus.gif" onClick="toggleInfo(this)">Title 1

I have checked the case senstiveness, and it is fine..

Do you have any idea who it is so!
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35469710
Actually it once opend does not closes down, here is my updated script

var imgPlus = "expand.gif";
var imgMinus = "collapse.gif";
function toggleInfo(img){
if(img.src=imgPlus) {
	alert("inside");
   	$("div",img.parentNode).show();
	$("span",img.parentNode).hide();
	img.src=imgMinus;
	alert(img.src=imgMinus);
	alert(img.src);
  } 
else {
	alert("Minus");
        img.src=imgPlus;
  	$("div",img.parentNode).hide();
	$("span",img.parentNode).show();
  }
}

Open in new window


i tryit on separate page and it works, just wandering what it creates an issue when it goes inside the main Page
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 35480473
in javascript to test equality you should use == not =

if(img.src=imgPlus)
-->
if(img.src==imgPlus)
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 35480492
also this one

alert(img.src=imgMinus); // this assigns imgMinus to img.src and shows ???? bot sure maybe object maybe true :)
-->
alert(img.src==imgMinus); // to show if it is true or false
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 35480501
so with all fixes, it should be like this
var imgPlus = "expand.gif";
var imgMinus = "collapse.gif";

function toggleInfo(img){
	if (img.src == imgPlus) {
		$("div",img.parentNode).show();
		$("span",img.parentNode).hide();
		img.src=imgMinus;
	} else {
		img.src=imgPlus;
		$("div",img.parentNode).hide();
		$("span",img.parentNode).show();
	}
}

Open in new window

0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35481068
i alerted the img tags o the issue is:

in the var imgPath. i am using  = "expand.gif"

in thactual img path, it is refeering to a full absolute path like this

http://domain.com/images/expand.gif

that could be an issue,
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35487731
so, i think the better way is we should consider some div and store the image in a class file and refer from that one as this can cause and is causing isses, the path it is picking id full path and it is unable to compare with the path i specified and that's why it is failing
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 35488402
then use "/images/expand.gif"
var imgPlus = "/images/expand.gif";
var imgMinus = "/images/collapse.gif";

function toggleInfo(img){
	if (img.src == imgPlus) {
		$("div",img.parentNode).show();
		$("span",img.parentNode).hide();
		img.src=imgMinus;
	} else {
		img.src=imgPlus;
		$("div",img.parentNode).hide();
		$("span",img.parentNode).show();
	}
}

Open in new window

0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35489309
@ hainkurt, i had tried this code also but it is not working!

the path of IMG.src inside the Page where i am calling the <IMG tag is returning me full path so it is failing over there,

Can we have something similar using div class attribute and embdded the images in that div, that might help!

what you say
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 35491291
still I could not get the issue... do you have a link to test it?

something like this should work

var imgPlus = "images/expand.gif";
var imgPlus = "/images/expand.gif";
var imgPlus = "../images/expand.gif";
var imgPlus = "../../images/expand.gif";

0
 
LVL 61

Accepted Solution

by:
HainKurt earned 2000 total points
ID: 35491299
here is another example without playing src element of image but uses 2 images one for plus one for minus

try to implement the first one, I dont see any reason for it to fail
<!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();
  }
  function hideInfo(img){
  		$(img).hide();
      $("img:nth-child(1)",img.parentNode).show();
      $("div.info",img.parentNode.parentNode).hide();
  }
  </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;">
	Title 1
	</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;">
	Title 2
	</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;">
	Title 3
	</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
 
LVL 16

Author Closing Comment

by:Gurpreet Singh Randhawa
ID: 35496856
This worked, Thanks
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is an updated version of a post made on my blog over 3 years ago. It is unfortunately, still very relevant as we continue to see both SQLi (SQL injection) and XSS (cross site scripting) attacks hitting some of the most recognizable website and …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question