Expanding information

Participant ,
May 04, 2021 May 04, 2021

Copy link to clipboard

Copied

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?

 

TOPICS
Code , How to , Server side applications

Views

627

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , May 04, 2021 May 04, 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

Likes

Translate

Translate
LEGEND ,
May 04, 2021 May 04, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
May 04, 2021 May 04, 2021

Copy link to clipboard

Copied

THANKS!  I'll work on that!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 04, 2021 May 04, 2021

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 04, 2021 May 04, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

quote

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

 


By @Nancy OShea

 

As far as I can tell it's supported 96%+ globally so I would say its ok to use, although I think javascipt gives more options and is probably what I would use, by habit. I tend to automate things these days with a lot of array object looping but if its just for the one off I don't see an issue with using details>summary

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

It all depends on the OP's target user.  The lack of support for it in IE11 and early Edge browsers might be a deal breaker for me at this point.  I would probably use JS for now and wait until global support for the HTML5 method reaches 98%.

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

quote

It all depends on the OP's target user.  The lack of support for it in IE11 and early Edge browsers might be a deal breaker for me at this point.  I would probably use JS for now and wait until global support for the HTML5 method reaches 98%.

 


By @Nancy OShea

 

Personally I wouldn't really worry about the minority that still use IE11 or early versions of Edge. If we wait for 100% acceptance nothing would move forward. I'd still use javascript but that's just me, out of habit and usually because I'm doing something more - if I had more than one details>summary I might want to automatically close the previous panel when I click on the next one rather than make the user toggle the 'unrequired' panels closed. You cant really apply any subtle effects, its basic but serves a purpose I guess in some situations where something more is not required.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

I would agree with you except that I still have users on IE11. Enough in fact that I can't dismiss them outright.  So until that changes, I must deploy JS fallbacks.  Your mileage may vary, of course.

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 13, 2021 May 13, 2021

Copy link to clipboard

Copied

LATEST

wow, i share your concern and problem. having users who are still with IE is not encouraging to move to complex applications.
plus your customers must have some concerns about loopholes and orientation by the end of the year
https://docs.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-support-end-dates 

I'm curious to understand why users are still blocking using IE ... which OS do they run ?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

it's perfect that this can work for you. i also like this kind of behavior directly related to HTML. No Javascript, just HTML and CSS.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines