Jquery how to change linking

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

AndyPSVAsked:
Who is Participating?
 
Pawel WitkowskiConnect With a Mentor Senior Javascript DeveloperCommented:

<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
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
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
 
AndyPSVAuthor Commented:
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
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
RoonaanCommented:
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
 
AndyPSVAuthor Commented:
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
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
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
 
AndyPSVAuthor Commented:
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
 
AndyPSVAuthor Commented:
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
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
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
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
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
 
AndyPSVAuthor Commented:
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
 
AndyPSVAuthor Commented:
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
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
thats simple but im little busy right now, I will try maybe do something
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
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
 
AndyPSVAuthor Commented:
Everything is ok, but i want to "DELETE IMG" after text link; text link BECOME A LINK
that's all
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
I dont get it... So where is those arrows? or those arrows are not links at all ? just indicates something right ?
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
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
 
AndyPSVAuthor Commented:
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
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
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
 
AndyPSVAuthor Commented:
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
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
 
AndyPSVAuthor Commented:
now it does not work
not expanding (questions)
0
 
AndyPSVAuthor Commented:
OK, THANKS! works perfect
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.