Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Jquery how to change linking

Posted on 2009-05-14
24
Medium Priority
?
419 Views
Last Modified: 2013-11-19
I've got script from this website: http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/

I want to:.
- expand all option be available
- <p class='btm1'><img src=<% $TPL %>img/icons/icon-right.gif alt='' />&nbsp;&nbsp;&nbsp;<% $r[q] %></p> BE ALL A LINK AND ON CLICK CHANGE TO: <p class='btm1 b'><img src=<% $TPL %>img/icons/icon-bottom.gif alt='' />&nbsp;&nbsp;&nbsp;<% $r[q] %></p>
(bold and img changes to bottom arrow, it's done already - look up)
- script minified
<script type="text/javascript"> 
<!--
// this tells jquery to run the function below once the DOM is read
$(document).ready(function() {
 
// choose text for the show/hide link
var showText='Show';
var hideText='Hide';
 
// append show/hide links to the element directly preceding the element with a class of "toggle"
$(".toggle").prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)');
 
// hide all of the elements with a class of 'toggle'
$('.toggle').hide();
 
// capture clicks on the toggle links
$('a.toggleLink').click(function() {
 
// change the link depending on whether the element is shown or hidden
if ($(this).html()==showText) {
$(this).html(hideText);
}
else {
$(this).html(showText);
}
 
// toggle the display
$(this).parent().next('.toggle').toggle();
 
// return false so any link destination is not followed
return false;
 
});
});
 
//-->
</script> 
 
<div class='tp box shadow radius' id=w2>	
	<div class=hd1>
		<table class=w><tr><td>
			<span class=fl><b>Questions and Answers from <% $PG_T2 %></b></span>
			<span class=fr><a href=#>Expand All</span>
		</td></tr></table>
	</div>
	
	<div class='rel lft1'>	
	<% foreach value = c from = $c %>
		<% if $c[seq] <> 0 %><% /if %>
		<div class='b btm2'><% $c[t] %></div>
		
		<% foreach value = r from = $r %>
			<% if $c[id] == $r[cat] %>
				<p class='btm1'><img src=<% $TPL %>img/icons/icon-right.gif alt='' />&nbsp;&nbsp;&nbsp;<% $r[q] %></p>
				<p class=toggle><% $r[answer] %></p>
			<% /if %>
		<% /foreach %>
	<% /foreach %>
	</div>
</div>

Open in new window

0
Comment
Question by:AndyPSV
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 11
24 Comments
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24395811
1.

 <span class=fr><a href=# onclick="$('.toggle').show()">Expand All</span>


2.

<p class='btm1'><img src="<% $TPL %>img/icons/icon-right.gif" alt='' / onclick="this.src='<% $TPL %>img/icons/icon-bottom.gif'">   <% $r[q] %></p>

3.

  What do you mean minified? There are tools for that, so you could use that by yourself :)
0
 

Author Comment

by:AndyPSV
ID: 24395892
ONLY expand All works.

I want WHOLE block as a link to be clear.
I've got now: Can I order by phone? (Show)
I want to: <a href=#>Can I order by phone?</a> --------------- SHOW dissapears, arrow right CHANGES TO arrow-bottom and WHOLE LINK is bold. I've supplied the code before.

Ow. and Expand All -> (Changes to) Collapse All

Anybody could help ?
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 24405198
Personally I often go without javascript in this kind of setups, and use css class changing:

.closed .when-opened {display:none}
.opened .when-closed {display:none }

<div class="closed">
   <a href="#" class="when-closed" onclick="this.parentNode.className = 'opened'; return false;">Expand All</a>
   <a href="#" class="when-opened" onclick="this.parentNode.className = 'closed'; return false;">Collapse All</a>
   <div class="when-opened">
      My content
   </div>
</div>


This allows you to use any link (or even multiple once) for toggling, and any content to be toggled as long as the whole is nested in some container element that holds the opened/closed class

Kind regards

Arnoud
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:AndyPSV
ID: 24405217
It's hard to implement it into this.
Can anyone modify the script above?
<div class=hd1>
		<table class=w><tr><td>
			<span class=fl><b>Questions and Answers from <% $PG_T2 %></b></span>
			 <span class=fr><a href=# onclick="$('.toggle').show()">Expand All</span>
		</td></tr></table>
	</div>
	
	<div class='rel lft1 w14_'>	
	<% foreach value = c from = $c %>
		<% if $c[seq] <> 0 %><% /if %>
		<div class='b btm2'><% $c[t] %></div>
		
		<% foreach value = r from = $r %>
			<% if $c[id] == $r[cat] %>
				<p class='btm1'><img src=<% $TPL %>img/icons/icon-right.gif alt='' />&nbsp;&nbsp;&nbsp;<% $r[q] %></p>
				<p class='toggle btm2'><% $r[answer] %></p>
			<% /if %>
		<% /foreach %>
	<% /foreach %>
	</div>

Open in new window

0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24409546
Sorry I didnt receive information that you post comment for what I gave you. What exacly not working in second point?

You pasted a code with embedded data from ASP - we dont have your variables values so we only trying to guess what can be there, and surelly we cannot say where and how it will be displayed.
0
 

Author Comment

by:AndyPSV
ID: 24410883
sample data
<div class='rel lft1 w14_'>	
					<div class='b btm2'>GENERAL</div> 
		
									<p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />&nbsp;&nbsp;&nbsp;Can I get 'stuff' personally?</p> 
				<p class='toggle btm2'>NO. <b>We sell only by Internet</b>. Shipment is the only available option.</p> 
												<p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />&nbsp;&nbsp;&nbsp;Can I order by phone?</p> 
				<p class='toggle btm2'>NO. <b>Website</b> is the <b>only way</b> to make <b>an order</b>.</p> 
												<p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />&nbsp;&nbsp;&nbsp;Do you keep 'stuff' in home?</p> 
				<p class='toggle btm2'>NO. <b>'Stuff' is being kept in separate place</b> which nobody knows the address <b>away from registered home address</b> and it's shipped by a person who nobody knows (even me!).</p> 
												<p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />&nbsp;&nbsp;&nbsp;Could you show me company registration records?</p> 
				<p class='toggle btm2'>Yes. Just open <a href=http://cocaincorp.com/about target=_blank>cocaincorp.com/about</a> link. You would find there scans of documents etc. You can also search the records database on <a href=http://www.start.biz/business_names/multi_search_name.php?name=cocaincorp target=_blank>"National Business Register"</a> website.</p> 
												<p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />&nbsp;&nbsp;&nbsp;How can I be sure that I would not be cheated?</p> 
				<p class='toggle btm2'>We <b>always</b> ship items. All signed/recorded delivery are subject to free-resends if they don't arrive. <b>XXX<sup>&trade</sup></b> brand is <b>promise</b>.</p> 
							</div> 
</div>

Open in new window

0
 

Author Comment

by:AndyPSV
ID: 24410958
OK. FULL CODE
PASTE IT

comments are in code
<script language=javascript src=http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js></script>
 
<script type="text/javascript"> 
<!--
// this tells jquery to run the function below once the DOM is read
$(document).ready(function() {
 
// choose text for the show/hide link
var showText='Show';
var hideText='Hide';
 
// append show/hide links to the element directly preceding the element with a class of "toggle"
$(".toggle").prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)');
 
// hide all of the elements with a class of 'toggle'
$('.toggle').hide();
 
// capture clicks on the toggle links
$('a.toggleLink').click(function() {
 
// change the link depending on whether the element is shown or hidden
if ($(this).html()==showText) {
$(this).html(hideText);
}
else {
$(this).html(showText);
}
 
// toggle the display
$(this).parent().next('.toggle').toggle();
 
// return false so any link destination is not followed
return false;
 
});
});
 
//-->
</script> 
 
<div class='tp box shadow radius' id=w2>        
        <div class=hd1>
                <table class=w><tr><td>
                        <span class=fl><b>Questions and Answers from <% $PG_T2 %></b></span>
                        <span class=fr><a href=# onclick="$('.toggle').show()">Expand All</span> 
                </td></tr></table>
        </div>
        
       <div class='rel lft1 w14_'>     
                                        <div class='b btm2'>GENERAL</div> 
                
                                                                        <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   Can I get 'stuff' personally?</p> 
                                <p class='toggle btm2'>NO. <b>We sell only by Internet</b>. Shipment is the only available option.</p> 
                                                                                                <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   Can I order by phone?</p> 
                                <p class='toggle btm2'>NO. <b>Website</b> is the <b>only way</b> to make <b>an order</b>.</p> 
                                                                                                <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   Do you keep 'stuff' in home?</p> 
                                <p class='toggle btm2'>NO. <b>'Stuff' is being kept in separate place</b> which nobody knows the address <b>away from registered home address</b> and it's shipped by a person who nobody knows (even me!).</p> 
 
 
                                                                                                <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   How can I be sure that I would not be cheated?</p> 
                                <p class='toggle btm2'>We <b>always</b> ship items. All signed/recorded delivery are subject to free-resends if they don't arrive. <b>XXX<sup>&trade</sup></b> brand is <b>promise</b>.</p> 
                                                        </div> 
</div>
</div>
 
<br /><br />
I WANT ACCHIEVE THIS.<br />
<p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-bottom.gif alt='' />   <b>Can I get 'stuff' personally?</b></p> [[[ NO HIDE SHOW HERE / LINK IS HIDE SHOW ]]]
<p class='toggle btm2'>We <b>always</b> ship items. All signed/recorded delivery are subject to free-resends if they don't arrive. <b>XXX<sup>&trade</sup></b> brand is <b>promise</b>.</p> 
                                                        </div> 
+ EXPAND ALL / IS COLLAPSE ALL AFTER CLICK

Open in new window

0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24411004
you mean this for 2 ??

<a href="#"><p class='btm1'><img src="<% $TPL %>img/icons/icon-right.gif" alt='' / onclick="this.src='<% $TPL %>img/icons/icon-bottom.gif'">   <% $r[q] %></p></a>


0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24411036
1.


<script type="text/javascript">

var expand=true;
function expandCollapse(element)
{
       if (expand) {
                $('.toggle').show();
                element.innerHTML="Collapse All";
              }
             else  {
                 
                 $('.toggle').hide();
                element.innerHTML="Expand All";
              }
      expand=!expand;
}

</script>

 <span class=fr><a href=# onclick="expandCollapse(this)">Expand All</span>
0
 

Author Comment

by:AndyPSV
ID: 24411038
yes. but (SHOW) and (HIDE) is there; what to do with it?
BESIDE i want text to BOLD when it's opened

it does not solves it
0
 

Author Comment

by:AndyPSV
ID: 24411062
yes, works perfect; point 2 left
<script language=javascript src=http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js></script>
 
<script type="text/javascript">
 
var expand=true;
function expandCollapse(element)
{
       if (expand) {
                $('.toggle').show();
                element.innerHTML="Collapse All";
              }
             else  {
                  
                 $('.toggle').hide();
                element.innerHTML="Expand All";
              }
      expand=!expand;
}
 
</script>
 
<script type="text/javascript"> 
<!--
// this tells jquery to run the function below once the DOM is read
$(document).ready(function() {
 
// choose text for the show/hide link
var showText='Show';
var hideText='Hide';
 
// append show/hide links to the element directly preceding the element with a class of "toggle"
$(".toggle").prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)');
 
// hide all of the elements with a class of 'toggle'
$('.toggle').hide();
 
// capture clicks on the toggle links
$('a.toggleLink').click(function() {
 
// change the link depending on whether the element is shown or hidden
if ($(this).html()==showText) {
$(this).html(hideText);
}
else {
$(this).html(showText);
}
 
// toggle the display
$(this).parent().next('.toggle').toggle();
 
// return false so any link destination is not followed
return false;
 
});
});
 
//-->
</script> 
 
<div class='tp box shadow radius' id=w2>        
        <div class=hd1>
                <table class=w><tr><td>
                        <span class=fl><b>Questions and Answers from <% $PG_T2 %></b></span>
                        <span class=fr><a href=# onclick="expandCollapse(this)">Expand All</a></span> 
                </td></tr></table>
        </div>
        
       <div class='rel lft1 w14_'>     
                                        <div class='b btm2'>GENERAL</div> 
                
                                                                        <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   Can I get 'stuff' personally?</p> 
                                <p class='toggle btm2'>NO. <b>We sell only by Internet</b>. Shipment is the only available option.</p> 
                                                                                                <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   Can I order by phone?</p> 
                                <p class='toggle btm2'>NO. <b>Website</b> is the <b>only way</b> to make <b>an order</b>.</p> 
                                                                                                <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   Do you keep 'stuff' in home?</p> 
                                <p class='toggle btm2'>NO. <b>'Stuff' is being kept in separate place</b> which nobody knows the address <b>away from registered home address</b> and it's shipped by a person who nobody knows (even me!).</p> 
 
 
                                                                                                <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   How can I be sure that I would not be cheated?</p> 
                                <p class='toggle btm2'>We <b>always</b> ship items. All signed/recorded delivery are subject to free-resends if they don't arrive. <b>XXX<sup>&trade</sup></b> brand is <b>promise</b>.</p> 
                                                        </div> 
</div>
</div>
 
<br /><br />
I WANT ACCHIEVE THIS after click.<br />
<p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-bottom.gif alt='' />   <b>Can I get 'stuff' personally?</b></p> [[[ NO HIDE SHOW HERE / LINK IS HIDE SHOW ]]]
<p class='toggle btm2'>We <b>always</b> ship items. All signed/recorded delivery are subject to free-resends if they don't arrive. <b>XXX<sup>&trade</sup></b> brand is <b>promise</b>.</p> 
                                                        </div> 
+ EXPAND ALL / IS COLLAPSE ALL AFTER CLICK

Open in new window

0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24412050
thats simple but im little busy right now, I will try maybe do something
0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24412195
try this
<script language=javascript src=http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js></script>
 
<script type="text/javascript">
 
var expand=true;
function expandCollapse(element)
{
       if (expand) {
                $('.toggleLink').each(function (){ show(this)});
                element.innerHTML="Collapse All";
              }
             else  {
                  
                 $('.toggleLink').each(function(){ hide(this)});
                element.innerHTML="Expand All";
              }
      expand=!expand;
}
 
</script>
 
<script type="text/javascript"> 
 
<!--
 
// choose icons for the show/hide link
var showIcon='<% $TPL %>img/icons/icon-right.gif';
var hideIcon='<% $TPL %>img/icons/icon-bottom.gif';
 
function showHide()
{
// change the link depending on whether the element is shown or hidden
if ($(this)[0].firstChild.getAttribute('src')==showIcon) {
    show(this);
}
else {
	hide(this);
}
 
// return false so any link destination is not followed
return false;
}
 
function show(element){
$(element).parent().css({fontWeight:"bold"});
$(element)[0].firstChild.src=hideIcon;
$(element).parent().next('.toggle').show();
}
 
function hide(element){
$(element).parent().css({fontWeight:"normal"});
$(element)[0].firstChild.src=showIcon;
$(element).parent().next('.toggle').hide();
}
 
// this tells jquery to run the function below once the DOM is read
$(document).ready(function() {
 
 
// append show/hide links to the element directly preceding the element with a class of "toggle"
$(".toggle").prev().append('<a href="#" class="toggleLink"><img src="'+showIcon+'" alt="" /></a>');
 
// hide all of the elements with a class of 'toggle'
$('.toggle').hide();
 
// capture clicks on the toggle links
$('a.toggleLink').click(showHide);
});
 
//-->
</script> 
 
<div class='tp box shadow radius' id=w2>        
        <div class=hd1>
                <table class=w><tr><td>
                        <span class=fl><b>Questions and Answers from <% $PG_T2 %></b></span>
                        <span class=fr><a href=# onclick="expandCollapse(this)">Expand All</a></span> 
                </td></tr></table>
        </div>
        
       <div class='rel lft1 w14_'>     
                                        <div class='b btm2'>GENERAL</div> 
                
                                                                        <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   Can I get 'stuff' personally?</p> 
                                <p class='toggle btm2'>NO. <b>We sell only by Internet</b>. Shipment is the only available option.</p> 
                                                                                                <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   Can I order by phone?</p> 
                                <p class='toggle btm2'>NO. <b>Website</b> is the <b>only way</b> to make <b>an order</b>.</p> 
                                                                                                <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   Do you keep 'stuff' in home?</p> 
                                <p class='toggle btm2'>NO. <b>'Stuff' is being kept in separate place</b> which nobody knows the address <b>away from registered home address</b> and it's shipped by a person who nobody knows (even me!).</p> 
 
 
                                                                                                <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   How can I be sure that I would not be cheated?</p> 
                                <p class='toggle btm2'>We <b>always</b> ship items. All signed/recorded delivery are subject to free-resends if they don't arrive. <b>XXX<sup>&trade</sup></b> brand is <b>promise</b>.</p> 
                                                        </div> 
</div>
</div>
 
<br /><br />
I WANT ACCHIEVE THIS after click.<br />
<p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-bottom.gif alt='' />   <b>Can I get 'stuff' personally?</b></p> [[[ NO HIDE SHOW HERE / LINK IS HIDE SHOW ]]]
<p class='toggle btm2'>We <b>always</b> ship items. All signed/recorded delivery are subject to free-resends if they don't arrive. <b>XXX<sup>&trade</sup></b> brand is <b>promise</b>.</p> 
                                                        </div> 

Open in new window

0
 

Author Comment

by:AndyPSV
ID: 24412923
Everything is ok, but i want to "DELETE IMG" after text link; text link BECOME A LINK
that's all
0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24413079
I dont get it... So where is those arrows? or those arrows are not links at all ? just indicates something right ?
0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24413116
In description of your question you said:

<p class='btm1'><img src=<% $TPL %>img/icons/icon-right.gif alt='' />&nbsp;&nbsp;&nbsp;<% $r[q] %></p> BE ALL A LINK AND ON CLICK CHANGE TO: <p class='btm1 b'><img src=<% $TPL %>img/icons/icon-bottom.gif alt='' />&nbsp;&nbsp;&nbsp;<% $r[q] %></p>


So I though you want an image to be a link ?
0
 

Author Comment

by:AndyPSV
ID: 24413129
nonono

In example which you gave:

it's like that: ARROW some text (question) "CLICK THIS TO SHOW" [[ and it's changes to HIDE ]]
I want: ARROW <a href=# [[CLICK THIS TO SHOW, NOT SEPARATE ON RIGHT]]>some text(question</a>
END. nothing to show/hide on right of the text; just it goes to link
0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24413389
You want arrow on left instead of right ? Still dont get what you want... can you make a simple picture for that in paint?
0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24420320
well this "sh%t" on right is just an image that you want, but of course I can remove it.

Is that what you mean ?
<script language=javascript src=http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js></script>
 
<script type="text/javascript">
 
var expand=true;
function expandCollapse(element)
{
       if (expand) {
                $('.toggleLink').each(function (){ show(this)});
                element.innerHTML="Collapse All";
              }
             else  {
                  
                 $('.toggleLink').each(function(){ hide(this)});
                element.innerHTML="Expand All";
              }
      expand=!expand;
}
 
</script>
 
<script type="text/javascript"> 
 
<!--
 
// choose icons for the show/hide link
var showIcon='<% $TPL %>img/icons/icon-right.gif';
var hideIcon='<% $TPL %>img/icons/icon-bottom.gif';
 
function showHide()
{
var test = $(this)[0].firstChild.getAttribute('src').match(showIcon);
// change the link depending on whether the element is shown or hidden
if (test) {
    show(this);
}
else {
	hide(this);
}
 
// return false so any link destination is not followed
return false;
}
 
function show(element){
$(element).parent().css({fontWeight:"bold"});
$(element)[0].firstChild.src=hideIcon;
$(element).parent().next('.toggle').show();
}
 
function hide(element){
$(element).parent().css({fontWeight:"normal"});
$(element)[0].firstChild.src=showIcon;
$(element).parent().next('.toggle').hide();
}
 
// this tells jquery to run the function below once the DOM is read
$(document).ready(function() {
 
 
// append show/hide links to the element directly preceding the element with a class of "toggle"
$(".toggle").prev().each(function()
{
var text=(this.innerText) ? this.innerText : this.textContent;
this.innerHTML="";
$(this).append('<a href="#" class="toggleLink"><img src="'+showIcon+'" alt="" />'+ text +'</a>');
});
 
// hide all of the elements with a class of 'toggle'
$('.toggle').hide();
 
// capture clicks on the toggle links
$('a.toggleLink').click(showHide);
});
 
//-->
</script> 
 
<div class='tp box shadow radius' id=w2>        
        <div class=hd1>
                <table class=w><tr><td>
                        <span class=fl><b>Questions and Answers from <% $PG_T2 %></b></span>
                        <span class=fr><a href=# onclick="expandCollapse(this)">Expand All</a></span> 
                </td></tr></table>
        </div>
        
       <div class='rel lft1 w14_'>     
                                        <div class='b btm2'>GENERAL</div> 
                
                                                                        <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   Can I get 'stuff' personally?</p> 
                                <p class='toggle btm2'>NO. <b>We sell only by Internet</b>. Shipment is the only available option.</p> 
                                                                                                <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   Can I order by phone?</p> 
                                <p class='toggle btm2'>NO. <b>Website</b> is the <b>only way</b> to make <b>an order</b>.</p> 
                                                                                                <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   Do you keep 'stuff' in home?</p> 
                                <p class='toggle btm2'>NO. <b>'Stuff' is being kept in separate place</b> which nobody knows the address <b>away from registered home address</b> and it's shipped by a person who nobody knows (even me!).</p> 
 
 
                                                                                                <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   How can I be sure that I would not be cheated?</p> 
                                <p class='toggle btm2'>We <b>always</b> ship items. All signed/recorded delivery are subject to free-resends if they don't arrive. <b>XXX<sup>&trade</sup></b> brand is <b>promise</b>.</p> 
                                                        </div> 
</div>
</div>
 
<br /><br />
I WANT ACCHIEVE THIS after click.<br />
<p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-bottom.gif alt='' />   <b>Can I get 'stuff' personally?</b></p> [[[ NO HIDE SHOW HERE / LINK IS HIDE SHOW ]]]
<p class='toggle btm2'>We <b>always</b> ship items. All signed/recorded delivery are subject to free-resends if they don't arrive. <b>XXX<sup>&trade</sup></b> brand is <b>promise</b>.</p> 
                                                        </div> 

Open in new window

0
 

Author Comment

by:AndyPSV
ID: 24422705
now it does not work
not expanding (questions)
0
 
LVL 18

Accepted Solution

by:
Pawel Witkowski earned 2000 total points
ID: 24423823

<script language=javascript src=http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js></script>
 
<script type="text/javascript">
 
var expand=true;
function expandCollapse(element)
{
       if (expand) {
                $('.toggleLink').each(function (){ show(this)});
                element.innerHTML="Collapse All";
              }
             else  {
                  
                 $('.toggleLink').each(function(){ hide(this)});
                element.innerHTML="Expand All";
              }
      expand=!expand;
}
 
</script>
 
<script type="text/javascript"> 
 
<!--
 
// choose icons for the show/hide link
var showIcon='<% $TPL %>img/icons/icon-right.gif';
var hideIcon='<% $TPL %>img/icons/icon-bottom.gif';
 
 
 
function showHide()
{
// change the link depending on whether the element is shown or hidden
if (this.hide) show(this);
    else hide(this);
 
// return false so any link destination is not followed
return false;
}
 
function show(element){
element.hide=false;
$(element).parent().css({fontWeight:"bold"});
$(element)[0].firstChild.src=hideIcon;
$(element).parent().next('.toggle').show();
}
 
function hide(element){
element.hide=true;
$(element).parent().css({fontWeight:"normal"});
$(element)[0].firstChild.src=showIcon;
$(element).parent().next('.toggle').hide();
}
 
// this tells jquery to run the function below once the DOM is read
$(document).ready(function() {
 
 
// append show/hide links to the element directly preceding the element with a class of "toggle"
$(".toggle").prev().each(function()
{
var text=(this.innerText) ? this.innerText : this.textContent;
this.innerHTML="";
$(this).append('<a href="#" class="toggleLink"><img src="'+showIcon+'" alt="" />'+ text +'</a>');
this.firstChild.hide=true;
});
 
// hide all of the elements with a class of 'toggle'
$('.toggle').hide();
 
// capture clicks on the toggle links
$('.toggleLink').click(showHide);
});
 
//-->
</script> 
 
<div class='tp box shadow radius' id=w2>        
        <div class=hd1>
                <table class=w><tr><td>
                        <span class=fl><b>Questions and Answers from <% $PG_T2 %></b></span>
                        <span class=fr><a href=# onclick="expandCollapse(this)">Expand All</a></span> 
                </td></tr></table>
        </div>
        
       <div class='rel lft1 w14_'>     
                                        <div class='b btm2'>GENERAL</div> 
                
                                                                        <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   Can I get 'stuff' personally?</p> 
                                <p class='toggle btm2'>NO. <b>We sell only by Internet</b>. Shipment is the only available option.</p> 
                                                                                                <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   Can I order by phone?</p> 
                                <p class='toggle btm2'>NO. <b>Website</b> is the <b>only way</b> to make <b>an order</b>.</p> 
                                                                                                <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   Do you keep 'stuff' in home?</p> 
                                <p class='toggle btm2'>NO. <b>'Stuff' is being kept in separate place</b> which nobody knows the address <b>away from registered home address</b> and it's shipped by a person who nobody knows (even me!).</p> 
 
 
                                                                                                <p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-right.gif alt='' />   How can I be sure that I would not be cheated?</p> 
                                <p class='toggle btm2'>We <b>always</b> ship items. All signed/recorded delivery are subject to free-resends if they don't arrive. <b>XXX<sup>&trade</sup></b> brand is <b>promise</b>.</p> 
                                                        </div> 
</div>
</div>
 
<br /><br />
I WANT ACCHIEVE THIS after click.<br />
<p class='btm1'><img src=http://localhost/tpl/i/img/icons/icon-bottom.gif alt='' />   <b>Can I get 'stuff' personally?</b></p> [[[ NO HIDE SHOW HERE / LINK IS HIDE SHOW ]]]
<p class='toggle btm2'>We <b>always</b> ship items. All signed/recorded delivery are subject to free-resends if they don't arrive. <b>XXX<sup>&trade</sup></b> brand is <b>promise</b>.</p> 
                                                        </div> 

Open in new window

0
 

Author Closing Comment

by:AndyPSV
ID: 31581770
OK, THANKS! works perfect
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 article discusses how to implement server side field validation and display customized error messages to the client.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

610 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