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?
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
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.
Copy link to clipboard
Copied
THANKS! I'll work on that!
Copy link to clipboard
Copied
Use a JavaScript toggle.
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
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
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.
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.
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.
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
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%.
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%.
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.
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.
Copy link to clipboard
Copied
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 ?
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.