Collapsed text using CSS

[Schraalhans Keukenmeester]

I have tried to collapse a long part of a text on my weblog
using the following construct:

<style>
div.expand { display : none; }
div.expand:hover (display : inline; }
div.expand em {display : inline; }
</style>

<p>Blablabla etc lorem ipsum yadayada</p>
<div class='expand'>
<em>expand!</em>
long list of collapsed text
long list of collapsed text
long list of collapsed text
long list of collapsed text
long list of collapsed text
long list of collapsed text
[...]
</div>

Using the <emtags I hoped to make only the expand! text visible by
default. But it isn't. Everything inside the <divis hidden (I use FF
1.5.0.8 on Linux) myself. Besides, this won't work on IE6, not sure
about 7. But since I don't care much for IE compatibility, I can live
with that (or provide an alternative using a hack).

How should I have approached this, if at all possible using CSS?
Ideally, is there a one-size-fits-all (browsers) solution, other than
JavaScript?

TIA!
Sh.

[Spartanicus]

Schraalhans Keukenmeester <bi*******@invalid.spamwrote:

div.expand { display : none; }
div.expand:hover (display : inline; }
div.expand em {display : inline; }

And how do you propose that keyboard users should access the content, or
users of speaking browsers?

--
Spartanicus

[Schraalhans Keukenmeester]

Spartanicus wrote:

Schraalhans Keukenmeester <bi*******@invalid.spamwrote:

> div.expand { display : none; }
div.expand:hover (display : inline; }
div.expand em {display : inline; }

And how do you propose that keyboard users should access the content, or
users of speaking browsers?

No idea. How does 'the average' newssite go about that? Loads of those
show only an excerpt of the full item and offer either a link or a
collapsed fragment.

Come to think of it, a separate style sheet for the visually impaired
would by no means diminish the usability of such a collapse/expand script.

If keyb users are the issue (to be honest, I don't worry too much about
all three of them) the focus pseudoclass would achieve the same wouldn't it?

Do you have a suggestion for a working solution too, Spartanicus?
Sh.

[David Dorward]

Schraalhans Keukenmeester wrote:

>And how do you propose that keyboard users should access the content, or
users of speaking browsers?

No idea. How does 'the average' newssite go about that? Loads of those
show only an excerpt of the full item and offer either a link or a
collapsed fragment.

By using keyboard triggerable events on focusable elements (links work very
well).

If keyb users are the issue (to be honest, I don't worry too much about
all three of them)

There are a great many keyboard users. Giving up use of a mouse can do
wonders for RSI (as I discovered a few summers ago) (and there are plenty
of other reasons to not use a pointing device).

the focus pseudoclass would achieve the same wouldn't
it?

No, since you can't give the focus to a div.

--
David Dorward <http://blog.dorward.me.uk/ <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Rik]

David Dorward wrote:

Schraalhans Keukenmeester wrote:

>>And how do you propose that keyboard users should access the
content, or users of speaking browsers?

>No idea. How does 'the average' newssite go about that? Loads of
those show only an excerpt of the full item and offer either a link
or a collapsed fragment.

By using keyboard triggerable events on focusable elements (links
work very well).

And a link is somewhat more logical then <em>.....

>If keyb users are the issue (to be honest, I don't worry too much
about all three of them)

There are a great many keyboard users. Giving up use of a mouse can do
wonders for RSI (as I discovered a few summers ago) (and there are
plenty of other reasons to not use a pointing device).

Like being about ten times as fast for instance. Allthough that might
depend on some highly exotic markup sometimes used, when tabbing let's
focus shoot across the page without a clear pattern. No need to think only
the handicaped or RSI-casualties don't use a pointing device.

>the focus pseudoclass would achieve the same wouldn't
it?

No, since you can't give the focus to a div.

Indeed.
--
Rik Wasmus

[dorayme]

In article <em*******************@news.demon.co.uk>,
David Dorward <do*****@yahoo.comwrote:

Giving up use of a mouse can do
wonders for RSI

Very true, is it so easy to do completely though? I try to use
keyboard commands wherever I can but perhaps better look into
more sophisticated ,ethods...

--
dorayme

[Schraalhans Keukenmeester]

Schraalhans Keukenmeester wrote:

Spartanicus wrote:

>Schraalhans Keukenmeester <bi*******@invalid.spamwrote:

>> div.expand { display : none; }
div.expand:hover (display : inline; }
div.expand em {display : inline; }

And how do you propose that keyboard users should access the content, or
users of speaking browsers?

Do you have a suggestion for a working solution too, Spartanicus?
Sh.

And does anyone of the honourable gentlemen/ladies have a suggested
solution? Or has this now merely become a pamflet for programming with
the disabled in mind?

Thanks

[Spartanicus]

Schraalhans Keukenmeester <bi*******@invalid.spamwrote:

>Do you have a suggestion for a working solution too, Spartanicus?

Before solutions can be discussed you'd have to show us the problem (the
bit of bogus data in your OP doesn't demonstrate anything).

--
Spartanicus

[Jukka K. Korpela]

Scripsit Schraalhans Keukenmeester:

And does anyone of the honourable gentlemen/ladies have a suggested
solution? Or has this now merely become a pamflet for programming with
the disabled in mind?

A solution was (somewhat implicitly) suggested to you. Basically, you should
use links, not tricks, to put less important content "behind the (current)
scenes". You seem to have decided to ignore the advice.

If you wish to know how to make content inaccessible to many people using
CSS, I suggest that you use a paid consultant who won't object to your
goals.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

Schraalhans Keukenmeester wrote :

Schraalhans Keukenmeester wrote:

>Spartanicus wrote:

>>Schraalhans Keukenmeester <bi*******@invalid.spamwrote:

div.expand { display : none; }
div.expand:hover (display : inline; }
div.expand em {display : inline; }
And how do you propose that keyboard users should access the content, or
users of speaking browsers?

Do you have a suggestion for a working solution too, Spartanicus?
Sh.

And does anyone of the honourable gentlemen/ladies have a suggested
solution? Or has this now merely become a pamflet for programming with
the disabled in mind?

Thanks

I use a cordless mouse which rely on batteries. Sometimes, the batteries
no longer work and then I very easily/quickly notice how bad some
websites are created. Just use links, plain links, normal links.

Gérard
--
remove blah to email me

[S.T.]

And does anyone of the honourable gentlemen/ladies have a suggested

solution? Or has this now merely become a pamflet for programming with
the disabled in mind?

Something like:
----------
<style>
div.expand {height: 1.4em; overflow: hidden;}
div.expand:hover {height: auto;}
</style>

<p>Blablabla etc lorem ipsum yadayada</p>
<div class='expand'>
<em>expand!</em><br>
long list of collapsed text
long list of collapsed text
long list of collapsed text
long list of collapsed text
long list of collapsed text
long list of collapsed text
[...]
</div>
----------
... maybe? Not exactly a textbook answer but, depending on it's purpose, it
or some variant might work. Seems to work in IE7 with XHTML Transitional
(not default though) - don't know about IE6.

I'd probably lean towards Javascript though. The JQuery library is pretty
handy for this stuff.

[Ben C]

On 2006-12-18, Schraalhans Keukenmeester <bi*******@invalid.spamwrote:

I have tried to collapse a long part of a text on my weblog
using the following construct:

<style>
div.expand { display : none; }
div.expand:hover (display : inline; }

You mean { of course. But that's not the only problem.

div.expand em {display : inline; }
</style>

<p>Blablabla etc lorem ipsum yadayada</p>
<div class='expand'>
<em>expand!</em>
long list of collapsed text
long list of collapsed text
long list of collapsed text
long list of collapsed text
long list of collapsed text
long list of collapsed text
[...]
</div>

It doesn't work because a block with display: none is like a black hole
from which nothing, not even boxes with display: inline, can escape.

So your display:inline em inside the display:none div is not visible.

How about this:

<style type="text/css">
div.expand span.collapsible { display : none; }
div.expand:hover span.collapsible { display : inline; }
</style>
</head>

...

<p>Blablabla etc lorem ipsum yadayada</p>
<div class='expand'>
<em>expand!</em>
<span class="collapsible">
long list of collapsed text
long list of collapsed text
long list of collapsed text
long list of collapsed text
long list of collapsed text
long list of collapsed text
[...]
</span>
</div>