Can Text Be Hidden and Shown Using Just CSS (No JavaScript Code)

Hide Show content-list with only CSS, no javascript used

I wouldn't use checkboxes, i'd use the code you already have

DEMO http://jsfiddle.net/6W7XD/1/

CSS

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert{display:none;}

HTML

<span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert" >Some alarming information here</p>

This way the text is only hidden on click of the hide element

Can an element be hidden and shown without Javascript?

The trick is defaulting to the red box when there's no hash fragment. I'm not sure you can do that with a pure CSS solution. (Edit: it turns out you can, as shown by Kaiido, provided you can put the default at the end; I should have thought of the general sibling combinator! But the CSS custom properties [aka "variables"] aren't actually doing anything in that AFAICS, see this fiddle.)

I don't know if it's possible to do this with CSS custom properties (aka "variables"); I tend to think not, since setting a custom property in the selector rule for one sibling (say, .box--blue:target) doesn't change its value for any elements not inside that .box--blue element (doesn't change it for the .box--red sibling, for instance). (Fiddle.) But you can definitely show/hide boxes with the old checkbox/radio button trick:

Define the boxes as display: none.

Have invisible radio buttons immediately prior to the box the radio button will relate to in the same parent:

<input type="radio" name="box-controller" id="chk-box--red" checked>
<div id="boxRed" class="box box--red"></div>

Have label elements that tick the radio button for that box (via id/for) instead of links.
```
<label tab-index="0" for="chk-box--red">Show red box</label>
```
In the above, note that I've added tab-index to the label so it show sup in the tabbing order. We probably also want CSS that underlines it or similar.
Have a CSS rule that says the .box immediately after a checked radio button should be display: block:
```
input[name=box-controller]:checked + .box {
    display: block;
}
```

Live example:

.box {
    height: 100px;
    width: 100px;
}
/* Hide boxes inside the outer box until/unless shown */
.box .box {
    display: none;
}

label {
    text-decoration: underline;
}

input[name=box-controller] {
    display: none;
}
input[name=box-controller]:checked + .box {
    display: block;
}

.box--red { 
    background-color: #ff0000;
}

.box--green { 
    background-color: #00ff00;
}

.box--blue { 
    background-color: #0000ff;
}

<div>
    <div class="box">
        <input type="radio" name="box-controller" id="chk-box--red" checked>
        <div id="boxRed" class="box box--red"></div>
        <input type="radio" name="box-controller" id="chk-box--green">
        <div id="boxGreen" class="box box--green"></div>
        <input type="radio" name="box-controller" id="chk-box--blue">
        <div id="boxBlue" class="box box--blue"></div>
    </div>
    
    <nav>
      <ul>
        <li><label tab-index"0" for="chk-box--red">Show red box</label></li>
        <li><label tab-index"0" for="chk-box--green">Show green box</label></li>
        <li><label tab-index"0" for="chk-box--blue">Show blue box</label></li>
      </ul>
    </nav>
</div>

Hide text using css

This is one way:

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

Here is another way to hide the text while avoiding the huge 9999 pixel box that the browser will create:

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

CSS hide/show selector still shows text in code?

What you are asking is impossible by css. Both display: none; and visibility: hidden; will be shown in the source code.

However, if you want that part of your source code not to be indexed by google you can use:

<!--googleoff: index-->
<div>Something here</div>
<!--googleon: index>

But still some articles say this works and some say it doesn't.

I have been looking for a 100% solution for a long time. Some say using jquery .show() and .hide() can help as well.

IMPORTANT NOTE: Hiding text is not a good practice if you need SEO. Google bots don't like hidden texts such as display: none; because they think you are hiding keyword content.

Hiding and showing the text only when it is necessary with jquery

It is happening because the show() function executes when you hover over it and even when you leave the mouse before 1.2 seconds, you are not preventing it, it will show the text once the delay is completed.

You need to execute hide() when mouseleave. that way it will stop the show() function. Try the snippet below:

$(document).ready(function(){  $('.show-hide').hide();  //This is for showing the text with delay 1.2 sec  $('a').mouseenter(function(){    $('.show-hide').show(1200);  });  //This is for hiding the text with no delay  $('a').mouseleave(function(){    $('.show-hide').hide();  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><a href="#"><p>Hover here</p></a>
<p class="show-hide"> This should be shown when hovered </p><p class="show-hide"> This should be shown when hovered </p>

Is there a shorter more concise way to hide & show div with Javascript?

There is no need for JS at all. You can simply use an anchor and use #id as hyper reference. Then you can display the element through CSS by using the :target-selector:

*,
html {
  color: #fff;
  background-color: black;
}

.d-none
/* Here I have many other divs like below */

{
  display: none;
}

div:target {
  display: grid;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <link rel="stylesheet" href="MOD.CSS">
  <script src="main2.js"></script>
  <title>Base Template</title>
</head>

<body>
  <div>
    <ul>
      <!-- Here I have other 20 options like the above -->
      <li><a href ="#presale">Presale</a></li>
      <li><a href ="#claim">Claim</a></li>
      <li><a href ="#stake">Stake</a></li>
      <!-- Here I have other 20 options like the above -->
    </ul>
    <div id="presale" class="d-none">
      <h1>Presale</h1>
    </div>
    <div id="claim" class="d-none">
      <h1>Claim</h1>
    </div>
    <div id="stake" class="d-none">
      <h1>Stake</h1>
    </div>
  </div>
</body>

</html>