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
2
-
2Look at the source code of that website.Blender– Blender2011-05-11 16:52:06 +00:00Commented 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– John Hartsock2011-05-11 16:52:52 +00:00Commented May 11, 2011 at 16:52
Add a comment
|
4 Answers
Honestly 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.com/css3-preview/showing-and-hiding-content-with-pure-css3.php
Hope that helps someone!
2 Comments
Bulrush
I was interested in your link but it's no longer there. I'd like to make an EPUB where a sidebar block of text is hidden and I can't find a single free EPUB reader that supports Javascript.
KoZm0kNoT
@Bulrush It seems they have redone their website, now it is a php page. I've updated it above.
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 recommend 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.
Comments
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.
Comments
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.