Skip to main content
ElizabethGailLittle
Inspiring
May 4, 2021 10:07 PM UTC
Answered

Expanding information

I have a list of items and I'd like to have additional information about each appear when cursoring over it.  I've looked in the css manual about the visible/invisible properties, searched the Dreamweaver & php manuals, and just can't get it right.  If someone would help me get started I would be very grateful.  I create some text with a class with visibility hidden and one with visibility visible, but don't know how to get that attached to the item.  In fact I'm muddled about the whole process.  What I read seems to suggest I need to use absolute positioning, and the hidden text leaves a blank space on the page, which is not what I'd like. 

 

I know I've seen pages that have photos & when you mouse over a box appears to the side with information about the photo.  I'm not using a photo, just a list item.  I've done the hover to interchange 2 images the same size, but that's not what I'm trying to do here.

 

Maybe this is something that just isn't possible?

 

This topic is closed to new replies. Start a new post to keep the conversation going.
B i r n o u
B i r n o uCorrect answer
Legend
May 5, 2021 6:54 AM UTC

if you want to stay semantic, and depending on the situation this HTML element is also there for that.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

12 replies

B i r n o u
B i r n o uCorrect answer
Legend
May 5, 2021 6:54 AM UTC

if you want to stay semantic, and depending on the situation this HTML element is also there for that.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Translate
ElizabethGailLittle
Inspiring
May 12, 2021 4:57 PM UTC

Thanks - that did it!  I am not familiar with JavaScript, so this was easier for me.  I just bought a book on JavaScript and will try to figure out how to use it and how to employ with php.

Translate
Nancy OShea
Community Expert
Community Expert
May 12, 2021 5:40 PM UTC

On which devices does your expanding/collapsing panel need to work?  I ask because many devices don't support HTML5 details.  But JavaScript can get the job done.  Refer to the "Can I Use" chart below.

https://caniuse.com/details

 

Translate
Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Community Expert
May 4, 2021 11:04 PM UTC

Use a JavaScript toggle. 

  • Tap button, data panel appears.
  • Tap button a 2nd time, data panel disappears.

https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

 

 

 

Translate
Nancy O'Shea— Product User & Community Expert
Legend
May 4, 2021 10:34 PM UTC

Maybe this is what you want, a tooltip

 

https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip

 

However hover events dont work on mobile devices if thats of any importance to you.

Translate
ElizabethGailLittle
Inspiring
May 4, 2021 10:37 PM UTC

THANKS!  I'll work on that!

Translate