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="expand">Title 1</h4>
<div class="collapse">...</div>
<h4 class="expand">Title 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 :
10000});
});
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.
