CODEWITHSUNDEEP
javascripthideshow-hide
John Smith
John Smith

Reputation: 149

How to hide and show text without javascript

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

Upvotes: 1

Views: 3736

Answers (4)

KoZm0kNoT
KoZm0kNoT

Reputation: 480

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!

Upvotes: 4

user11777421
user11777421

Reputation:

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.

Upvotes: 0

Kraz
Kraz

Reputation: 7090

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.

Upvotes: 0

Tejs
Tejs

Reputation: 41256

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.

Upvotes: 3

Related Questions