Forum Moderators: open
Any help appreciated.
Dexie.
Here's a thread in our Javascript forum with a discussion and some starter code:
[webmasterworld.com...]
[edited by: tedster at 9:45 pm (utc) on May 15, 2008]
One thing, do you know if it's possible to create the same effect, but without js please ?
And there's a clear advantage of loading everything with the first source code - search engines can index the content that the link click will reveal. Sometimes this can frustrate visitors who come from a search result, unless you modify the javascript so that when the keyword is only in the "usually-hidden" div, it is automatically switched to display:block or visibility:visible.
Marshall
</style>
</head>
<body>
<a href="#">Link<br /><span>Hello</span></a>
</body>
If you make the span display: block; you can set margins, padding, border, etc:
<head>
<style type="text/css">
a {
text-decoration: none;
}
a span {
display: none;
}
a:hover span {
color: #000;
background-color: #FFF;
display: block;
margin-top: 30px;
position: absolute;
padding: 5px;
border: 1px solid #000;
}
</style>
</head>
<body>
<p><a href="#">Link<span>Hello<br />My name is Marshall</span></a></p>
<p>Next line</p>
</body>
Hope this helps.
Marshall
[edited by: Marshall at 7:47 am (utc) on May 16, 2008]
a:hover span {a:focus span {If you are creative, you could use :hover to instruct the user to click in order to see the full text from :focus
The problem I see with a:focus is that you would have to click on the link to display the span. That being said, unless the link is a "#", it is going to take you to its destination which kind of defeats the purpose.
Marshall
The problem I see with a:focus is that you would have to click on the link to display the span
But the traditional show/hide requires a click, and the user expects to have to click a link anyway.
That is correct, the user is expecting to click a link.
Anything else to add ?
Anyone know what this is called please ?
There are many types of toggle, for example, a checkbox that checks or unchecks all other checkboxes in a form, I would call this a visibility toggle.
