An alternative to reveal widgets and detail elements?

[Charlie Veniot]

Nothing revolutionary here.  Just the result of some goofing around with CSS.

Give it a spin at TiddlyWiki.com.

````

<style>
.ch1 div {display:none;}
.ch1:hover {background-color:#F5F5F5;border:1px solid gray;}
.ch1:hover div {display:block;}
</style>

<$list filter="[tag[Articles]]">
<div class="ch1">
{{!!title}}<br>
<div style="max-height:100px;overflow:auto;">
<$transclude mode="block">
</div>
</div>
</$list>

```

[S²]

Hi Charlie,
how do I get a delay of eg. 2sec to display the details when hover the title?

(didn't succed with transition-delay: 2s;)

Thanks,

Stefan

[Charlie Veniot]

Give this sloooooooow crawl a spin:

```

<style>
.ch1 peekaboo {display:none;}

.ch1:hover {background-color:#F5F5F5;border:1px solid gray;}

.ch1:hover peekaboo {display:block;}
.slow {
  animation-name: example;
  animation-duration: 5s;}
@keyframes example {
  0%    {height:0px;}
  100% {height:150px;}

}
</style>

<$list filter="[tag[Articles]]">
<div class="ch1">
{{!!title}}<br>

<peekaboo class="slow" style="max-height:100px;overflow:auto;">

<$transclude mode="block">
</div>
</div>
</$list>

```

[Charlie Veniot]

(Previous version had a little typo in the keyframe height.  No impact, but fixed in this iteration.)

And a "hover-over, wee delay before display of details" version:

```

<style>
.ch1 peekaboo {display:none;}
.ch1:hover {background-color:#F5F5F5;border:1px solid gray;}
.ch1:hover peekaboo {display:block;}
.slow {
  animation-name: example;
  animation-duration: 5s;}
@keyframes example {
  0%    {height:0px;}

  20%   {height:0px;}
  100% {height:100px;}

}
</style>

<$list filter="[tag[Articles]]">
<div class="ch1">
{{!!title}}<br>
<peekaboo class="slow" style="max-height:100px;overflow:auto;">
<$transclude mode="block">
</div>
</div>
</$list>

```

[S²]

This is also nice behavior.

But I thought when hovering the link (title) -  the content will be shown delayed  (eg. 2sec)  - of course with upper code. :-)

Thanks, Stefan

[springer]

I love how compact this code is, and how it relies on nothing other than css!

Some kind of visible "affordance-cue" seems needed, to invite the hovering. Very slightly tweaked (without any delay), I like:

```

<style>
.pop div {display:none; ; background-color:#ffd;}
.pop:hover {background-color:#ffa; border-right: 6px solid #ffa;}
.pop:hover div {display:block;}

</style>

<$list filter="[tag[Articles]]">

<div class="pop" style="border-top: 6px solid #ffd; border-left: 6px solid #ffd;">
{{!!title}}
<div style="border-left:2em solid #ffa; padding-left:1em; max-height:100px;overflow:auto;">

<$transclude mode="block">
</div></div>
</$list>

```