How can you hide and show text without using javascript? I know using javascript would be much easier, but in this case I can't.
I'm looking for something like this: .htm
How can you hide and show text without using javascript? I know using javascript would be much easier, but in this case I can't.
I'm looking for something like this: http://www.pmob.co.uk/temp/hideandshow3-css.htm
Share asked May 11, 2011 at 16:49 John SmithJohn Smith 1491 gold badge2 silver badges7 bronze badges 2- 2 Look at the source code of that website. – Blender Commented May 11, 2011 at 16:52
- Did you look at the source of the demo? If so what exactly are you confused about? – John Hartsock Commented May 11, 2011 at 16:52
4 Answers
Reset to default 4Honestly don't know why some folks want to be code snobs, but there's nothing wrong with your approach. I have to code for folks that don't have javascript enabled, so it makes perfect sense to leverage CSS...it's NOT a hack to use its potential.
Here is an excellent article to do exactly what you want:
https://www.cssportal./css3-preview/showing-and-hiding-content-with-pure-css3.php
Hope that helps someone!
You can view the code on that page to see how it's happening:
ul.hshow li a:focus span, ul.hshow li a:active span {
display:block;
border:5px solid red;
text-align:left;
padding:5px;
height:auto;
overflow:visible;
position:relative;
left:auto
}
However, I wouldn't remend doing this because it's almost a hack of CSS to do things like this. CSS should be used for styling your elements to give a look and feel; NOT for providing behavior of elements like javascript is for.
It use the a:active property to display those texts.
Basically, you need to put your content inside your link, hide it when the link is not active but show if it is active.
The issue is that clicking on any link will hide the currently shown content and tabbing links will be counted as "clicking".
It is not a really a good idea to use it. Using a:hover would be better.
You can use CSS:
<!DOCTYPE html>
<html>
<body>
<h1>Click Me!</h1>
</body>
<style>
h1:active {
opacity: 0;
}
</style>
</html>
The active selector lets CSS detect when the user clicks on an HTML element. In this example, when the element is clicked, it sets the opacity to 0, which means it's transparent. Or, if you want it to really hide, do this:
<!DOCTYPE html>
<html>
<body>
<h1>Click Me!</h1>
<p>I am Bob.</p>
</body>
<style>
h1:active {
display: none;
}
</style>
</html>
This again uses the active selector.