You could lay out the list like so:
<ul id="your_list">
<li>Sight-hounds and other fast dogs
<div>
Two or three paragraphs describing greyhounds,
whippets, Italian
greyhounds, their relative size, average top speed, and so on.
</div>
</li>
<li>
etc.
<div>etc.</div>
</li>
</ul>
<div id="your_container"></div>
Create a CSS rule:
#your_list div { display: none; }
You might also want to add this rule:
#your_list li { cursor: pointer; }
The js:
$(function()
{
$('#your_list li').click(function()
{
$('#your_container').html(
$('div', this).html()
);
});
});
On Sun, Apr 5, 2009 at 9:39 PM, Jerry <toastedspi...@gmail.com> wrote:
>
> Hi all.
>
> I'm totally new to jQuery, but have been assured this is the place to
> "do stuff".
>
> I'm still trying to work through the most basic basics, but in the
> meantime, hoping I can find an example of how to do this.
>
> On a given web page, the user sees two side-by-side areas of text
> (i.e. two columns).
>
> On the left is a vertical bullet list of lines of text.
> On the right is a "container" for text. The contents of the container
> vary according to which item in the bullet list is clicked.
>
> In other words, if the user clicks on the 3rd one-line statement, the
> box on the right has a corresponding body of text.
>
> Example:
> On the left, click on a line that reads "Sight-hounds and other fast
> dogs".
> On the right, two or three paragraphs appear, describing greyhounds,
> whippets, Italian greyhounds, their relative size, average top speed,
> and so on.
>
> Both the left and right "boxes" will be sized the same.
>
> Is this doable? If so, does someone have a working example I can look
> at, please.
>
> I'm primarily a photographer, not a developer so need to ask your
> patience (and maybe use "small words" :))
>
> Thank you very much!
> Jerry
>
>
