Skip to main content
ElizabethGailLittle
ElizabethGailLittle
Inspiring
May 4, 2021
Answered

Expanding information

  • May 4, 2021
  • 3 replies
  • 1367 views

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 has been closed for replies.
Correct answer B i r n o u

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

3 replies

B i r n o u
B i r n o uCorrect answer
Legend
May 5, 2021

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

    ElizabethGailLittle
    ElizabethGailLittleAuthor
    Inspiring
    May 12, 2021

    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.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 12, 2021

    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

     

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 4, 2021

    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

     

     

     

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Legend
    May 4, 2021

    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.

      ElizabethGailLittle
      ElizabethGailLittleAuthor
      Inspiring
      May 4, 2021

      THANKS!  I'll work on that!

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices