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
(bold and img changes to bottom arrow, it's done already - look up)
- script minified
I want to:.
- expand all option be available
- <p class='btm1'><img src=<% $TPL %>img/icons/icon-right.gif
(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='' /> <% $r[q] %></p>
<p class=toggle><% $r[answer] %></p>
<% /if %>
<% /foreach %>
<% /foreach %>
</div>
</div>
ASKER
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 ?
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 ?
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.c
<a href="#" class="when-opened" onclick="this.parentNode.c
<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
.closed .when-opened {display:none}
.opened .when-closed {display:none }
<div class="closed">
<a href="#" class="when-closed" onclick="this.parentNode.c
<a href="#" class="when-opened" onclick="this.parentNode.c
<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
ASKER
It's hard to implement it into this.
Can anyone modify the script above?
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='' /> <% $r[q] %></p>
<p class='toggle btm2'><% $r[answer] %></p>
<% /if %>
<% /foreach %>
<% /foreach %>
</div>
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.
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.
ASKER
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='' /> 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='' /> 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='' /> 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>
ASKER
OK. FULL CODE
PASTE IT
comments are in 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
you mean this for 2 ??
<a href="#"><p class='btm1'><img src="<% $TPL %>img/icons/icon-right.gif
<a href="#"><p class='btm1'><img src="<% $TPL %>img/icons/icon-right.gif
1.
<script type="text/javascript">
var expand=true;
function expandCollapse(element)
{
if (expand) {
$('.toggle').show();
element.innerHTML="Collaps
}
else {
$('.toggle').hide();
element.innerHTML="Expand All";
}
expand=!expand;
}
</script>
<span class=fr><a href=# onclick="expandCollapse(th
<script type="text/javascript">
var expand=true;
function expandCollapse(element)
{
if (expand) {
$('.toggle').show();
element.innerHTML="Collaps
}
else {
$('.toggle').hide();
element.innerHTML="Expand All";
}
expand=!expand;
}
</script>
<span class=fr><a href=# onclick="expandCollapse(th
ASKER
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
BESIDE i want text to BOLD when it's opened
it does not solves it
ASKER
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
thats simple but im little busy right now, I will try maybe do something
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>
ASKER
Everything is ok, but i want to "DELETE IMG" after text link; text link BECOME A LINK
that's all
that's all
I dont get it... So where is those arrows? or those arrows are not links at all ? just indicates something right ?
In description of your question you said:
<p class='btm1'><img src=<% $TPL %>img/icons/icon-right.gif
So I though you want an image to be a link ?
<p class='btm1'><img src=<% $TPL %>img/icons/icon-right.gif
So I though you want an image to be a link ?
ASKER
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
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
You want arrow on left instead of right ? Still dont get what you want... can you make a simple picture for that in paint?
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 ?
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>
ASKER
now it does not work
not expanding (questions)
not expanding (questions)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
OK, THANKS! works perfect
<span class=fr><a href=# onclick="$('.toggle').show
2.
<p class='btm1'><img src="<% $TPL %>img/icons/icon-right.gif
3.
What do you mean minified? There are tools for that, so you could use that by yourself :)