Member Avatar for Bio-shippo

Is it possible to have text that will hide it self behind a link that, when clicked, will reveal the information it hides? If so then how do I do it? Also, can you have a hover effect that gives a description of the text?

  • 2 Contributors
  • 3 Replies
  • 189 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by sreein1986

Dani AI

Generated

asked whether hidden text can be revealed by a link and whether a hover can show a description; provided a classic MM_showHideLayers approach. A cleaner, more accessible pattern is to use a semantic button that toggles a hidden element, plus a tooltip-like description for hover/focus. Below are small, modern options that cover three common interpretations of “show it only once.”

A one-time reveal for the current page load (handler runs once):

<button id="reveal" aria-expanded="false" aria-controls="secret">Show details</button>
<div id="secret" hidden>Hidden text goes here.</div>

<script>
const btn = document.getElementById('reveal');
const secret = document.getElementById('secret');

btn.addEventListener('click', () => {
  secret.hidden = false;
  btn.setAttribute('aria-expanded', 'true');
}, { once: true });
</script>

Persist the “shown” state across visits using localStorage (so it won’t show again on future loads):

if (!localStorage.getItem('secretShown')) {
  btn.addEventListener('click', () => {
    secret.hidden = false;
    btn.setAttribute('aria-expanded', 'true');
    localStorage.setItem('secretShown', '1');
  });
} else {
  secret.hidden = false;
  btn.setAttribute('aria-expanded', 'true');
  btn.disabled = true;
}

For a hover/focus description (works on keyboard too), use a data attribute with a CSS tooltip; avoid hover-only solutions because touch devices don’t have hover:

<button data-tooltip="Short summary of the hidden text">Show details</button>
[data-tooltip]{ position:relative; }
[data-tooltip]:hover::after,
[data-tooltip]:focus::after{
  content: attr(data-tooltip);
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  background:#222; color:#fff; padding:6px; border-radius:4px; white-space:nowrap;
}

Accessibility notes: prefer a button over an anchor, keep aria-expanded in sync, and ensure keyboard focus reveals the same tooltip as hover. If only one panel should be visible among many, implement the accordion pattern (close others when opening one).

Recommended Answers

All 3 Replies

Member Avatar for sreein1986 
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	left:116px;
	top:37px;
	width:346px;
	height:257px;
	z-index:1;
}
.style1 {
	font-family: tahoma;
	font-size: 12px;
	color: #990000;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div class="style1" id="Layer1">
 <p>Is it possible to have text that will hide it self behind a link that, when   clicked, will reveal the information it hides? If so then how do I do it? Also,   can you have a hover effect that gives a description of the text?</p>
 <p>Is it possible to have text that will hide it self behind a link that, when clicked, will reveal the information it hides? If so then how do I do it? Also, can you have a hover effect that gives a description of the text?</p>
 <p>Is it possible to have text that will hide it self behind a link that, when clicked, will reveal the information it hides? If so then how do I do it? Also, can you have a hover effect that gives a description of the text?</p>
</div>
<img src="about_us.jpg" onclick="MM_showHideLayers('Layer1','','hide')" ondblclick="MM_showHideLayers('Layer1','','show')" />
</body>

Hi,
Copy paste these code

Member Avatar for Bio-shippo

thanks but how do you mod it to only show it once?

Member Avatar for sreein1986

this code in javascript and HTML
if problem solved mark it solved ...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.