What Are The Various Ways to Hide a <Div>

What are the various ways to hide a div?

Several possibilities:

display: none - This will cause the browser to not render it. It would also make it completely vanish from screen readers as well, so beware.
visibility: hidden - This will cause the browser to render it, it wouldn't be visible, but would leave a space corresponding to the element's size.
position: absolute and the send it to a ridiculous location (for example, left: -99999px; assuming parent's overflow isn't set to auto or scroll). - This works well when you want the element not actually visible, but still exist in the source or the DOM.
Set width and height to 0, and ensure overflow: hidden - Same as above, the element would be completely invisible, but still exist at the DOM or source.
opacity: 0 - Would achieve the same effect of visibility: hidden only through different means (i.e. changing the actual opacity of the element).

Now this all depends on why you need it.

Do you want to make the element completely disappear? display: none (and making it reappear with display: block) is your choice.
Do you want to animate it? Going with opacity: 0 or width&height is probably a better choice, perhaps with some JavaScript.
Want it to be accessible to screen readers, but not actually visible (for example, hidden image captions?), going with position: absolute; left: -99999px works well.

How do you create a hidden div that doesn't create a line break or horizontal space?

Use display:none;

<div id="divCheckbox" style="display: none;">

visibility: hidden hides the element, but it still takes up space in the layout.
display: none removes the element completely from the document, it doesn't take up any space.

How to display and hide a div with CSS?

You need

.abc,.ab {
    display: none;
}

#f:hover ~ .ab {
    display: block;
}

#s:hover ~ .abc {
    display: block;
}

#s:hover ~ .a,
#f:hover ~ .a{
    display: none;
}

Updated demo at http://jsfiddle.net/gaby/n5fzB/2/

The problem in your original CSS was that the , in css selectors starts a completely new selector. it is not combined.. so #f:hover ~ .abc,.a means #f:hover ~ .abc and .a. You set that to display:none so it was always set to be hidden for all .a elements.

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>

Show/hide 'div' using JavaScript

How to show or hide an element:

In order to show or hide an element, manipulate the element's style property. In most cases, you probably just want to change the element's display property:

element.style.display = 'none';           // Hide
element.style.display = 'block';          // Show
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show

Alternatively, if you would still like the element to occupy space (like if you were to hide a table cell), you could change the element's visibility property instead:

element.style.visibility = 'hidden';      // Hide
element.style.visibility = 'visible';     // Show

Hiding a collection of elements:

If you want to hide a collection of elements, just iterate over each element and change the element's display to none:

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}

// Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));

hide(document.querySelectorAll('.target'));
function hide (elements) {  elements = elements.length ? elements : [elements];  for (var index = 0; index < elements.length; index++) {    elements[index].style.display = 'none';  }}

<div class="target">This div will be hidden.</div>
<span class="target">This span will be hidden as well.</span>

how to hide the content of the div in css

Without changing the markup or using JavaScript, you'd pretty much have to alter the text color as knut mentions, or set text-indent: -1000em;

IE6 will not read the :hover selector on anything other than an anchor element, so you will have to use something like Dean Edwards' IE7.

Really though, you're better off putting the text in some kind of element (like p or span or a) and setting that to display: none; on hover.

How can I hide a DIV without using CSS?

window.onload = function(){
    document.getElementById('your_div_id').style.display = 'none';
}

http://jsfiddle.net/nXvF5/

Or, in jQuery:

$(document).ready(function(){
    $('#your_div_id_or_other_selector').hide();
});

http://jsfiddle.net/nXvF5/1/

How to hide a div with jQuery?

$('#myDiv').hide();

$('#myDiv').slideUp();

$('#myDiv').fadeOut();

What Are The Various Ways to Hide a <Div>