Hi Rory,
I will try to give you a detailed explanation.
The file expand.js contains two scripts: the expandAll() plug-in and the
small toggler() plug-in.
1.) expandAll()
- generates the switch 'Expand All/Collapse All' (or, in your case, 'go
ahead.../ ...go back');
- when the 'switch' is clicked, the plug-in toggles the visibility of the
matched elements;
- when the 'switch' is clicked, the strings 'Expand All' / 'Collapse All'
(or 'go ahead... ' / ' ...go back') are swapped;
- if the HTML code consists of pairs of triggers and collapsible sections,
the plug-in toggles the class of the trigger elements. Your code does not
contain such pairs. You have only the generated 'switch', and one
collapsible section.
2.) toggler()
- this script is needed if the HTML code consists of pairs of triggers and
collapsible sections, e.g.,
div class=container
h4 class=expandTitle 1/h4
div class=collapse.../div
h4 class=expandTitle 2/h4
div class=collapse.../div
/div
As I said above, your page does not contain such a structure.
So, you need only the expandAll() plug-in.
In your HTML code, you call the plug-ins expandAll() and toggler() with the
following chunk of code:
$(function() {
$(#outer).expandAll({trigger: span.expand, ref: div.demo});
$(#outer div.demo span.expand).toggler({method: toggle, speed :
1});
});
All you need is expandAll().
When you call the plug-in, you'll want to change some of the default options
because you want a 'slide' effect with duration 'slow', i.e., 600
milliseconds.
Replace the above code with this:
$(function() {
$(#outer).expandAll({
ref: div.demo,
showMethod: slideDown,
hideMethod: slideUp,
speed: 600
});
});
That's all.
Please, let me know if this explanation is clear enough.
Regards,
Adriana
Rory Bernstein wrote:
Hi Adriana,
Adriana, I am honored that you wrote in to help me; it is, or course,
your script I am trying to work with.
I do not understand what you are asking me to do; can you please give
more info/context? Are you saying that I am missing the lines of code
you put in your response? If so, where do I put the code?
I am truly a novice, as you see.
Thank you so much,
Rory
On Jan 20, 9:36 am, Adriana P adipa...@yahoo.com wrote:
Hi Rory,
You need only the expandAll() plug-in:
$(function() {
$(#outer).expandAll({trigger: span.expand, ref: div.demo,
showMethod: slideDown, hideMethod: slideUp, speed: 600});
});
Regards,
Adriana
Rory Bernstein wrote:
Hello,
I am a total jQuery novice, and I tried to use jQuery for a project
but I'm having trouble.
http://www.rorybernstein.com/stage/index2.html
When you click the blue go ahead link, it expands the hidden div,
revealing content. I want the effect to be a slide effect, as on
this sample page:
http://adipalaz.awardspace.com/experiments/jquery/expand.html
From these various examples, I want the slideToggle effect -
slideToggle (slow), as shown in section 2 of the above link.
I cannot figure out what is wrong; my toggle link does work (it
expands the hidden div), but I do not know how to get it to slide at
the speed shown in the sample.
Any help would be appreciated.
Thanks,
Rory
--
View this message in
context:http://old.nabble.com/need-help-with-simple-jQuery-problem-tp27228125...
Sent from the jQuery General Discussion mailing list archive at
Nabble.com.
--
View this message in context:
http://old.nabble.com/need-help-with-simple-jQuery-problem-tp27228125s27240p27260787.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.