Solved

Jquery how to change linking

Posted on 2009-05-14
24
390 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
  • 11
  • 11
24 Comments
 
LVL 18

Expert Comment

by:wilq32
Comment Utility
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
Comment Utility
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
Comment Utility
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
 

Author Comment

by:AndyPSV
Comment Utility
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:wilq32
Comment Utility
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
Comment Utility
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
Comment Utility
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:wilq32
Comment Utility
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:wilq32
Comment Utility
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
Comment Utility
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
Comment Utility
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 18

Expert Comment

by:wilq32
Comment Utility
thats simple but im little busy right now, I will try maybe do something
0
 
LVL 18

Expert Comment

by:wilq32
Comment Utility
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
Comment Utility
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:wilq32
Comment Utility
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:wilq32
Comment Utility
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
Comment Utility
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:wilq32
Comment Utility
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
 

Author Comment

by:AndyPSV
Comment Utility
0
 
LVL 18

Expert Comment

by:wilq32
Comment Utility
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
Comment Utility
now it does not work
not expanding (questions)
0
 
LVL 18

Accepted Solution

by:
wilq32 earned 500 total points
Comment Utility

<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
Comment Utility
OK, THANKS! works perfect
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now