Toggle Divs Without Using JavaScript

HTML / CSS Hide / Show Page Objects Without JavaScript Toggle Switch

This is a bit limited, but if you can use a checkbox and want a pure HTML and CSS solution, you could use the :checked CSS selector as a reference for your CSS rules to hide/show elements whenever the box is checked.

input:checked + .hidable {  display: none;}
input:not(:checked) + .showable {  display: none;}

<input type="checkbox" /> Hide text below<div class="hidable">I am totally not hidden right now</div><br />
<input type="checkbox" /> Show some text below<div class="showable">It seems I just got shown</div><br />
<input type="checkbox" /> Hide all the elements below, including image<div class="hidable">  <strong>many elements here</strong>  <strong>hi</strong>  <img src="https://vignette.wikia.nocookie.net/rickandmorty/images/4/41/Garmanarnar.PNG/revision/latest?cb=20160117000927" />  <strong>bye</strong></div>

Is it possible to toggle divs without jQuery?

You can change your function as this;

function displayquestion(a){
  var questions = document.getElementsByClassName("questionholder");
  for(var i=0; i < questions.length; i++) {
    questions[i].style.display = "none";
  }

  var nextQuestion = document.getElementById("question" + a);
  if(nextQuestion !== null) {
    nextQuestion.style.display = "block"
  }
}

How to toggle Effect in Div using only css?

That is not possible with the given requirements, all elements being a div.

It would be possible if you change div's acting as links to anchors a, and use :target pseudo

By setting display: inline-block on the anchor a, you can size it as you can with a div

.clicker {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: blue;
  color:#FFF;
}
.clicker.hidden {
  display: none;
}
.hiddendiv {
  height: 0px;
  background-color: green;
  overflow: hidden;
  transition: height 0.5s;
}
.hiddendiv.nr2 {
  background-color: red;
}

#showdiv1:target ~ div a[href="#showdiv1"],
#showdiv2:target ~ div a[href="#showdiv2"] {
  display: none;
}
#showdiv1:target ~ div a[href="#hidediv1"],
#showdiv2:target ~ div a[href="#hidediv2"] {
  display: inline-block;
}
#showdiv1:target ~ div .hiddendiv.nr1,
#showdiv2:target ~ div .hiddendiv.nr2 {
  height: 130px;
}

<div id="showdiv1"></div>
<div id="showdiv2"></div>

<div>
  <a href="#showdiv1" class="clicker" tabindex="1">Click me 1</a>
  <a href="#hidediv1" class="clicker hidden" tabindex="1">Click me 1</a>

  <a href="#showdiv2" class="clicker" tabindex="2">Click me 2</a>
  <a href="#hidediv2" class="clicker hidden" tabindex="2">Click me 2</a>

  <div class="hiddendiv nr1"></div>
  <div class="hiddendiv nr2"></div>
</div>

What's a simple, non-jquery way to toggle between two divs using two buttons?

About your code:

• You have to call the function using parenthesis like Hide_Content_A() and Hide_Content_B(); which are misssing in onclick of the <button>
• The functions Content_B and Content_B start with uppercase C.

The fix your own code, just run Hide_Content_B(); at the end to hide the second one.

Note that you can also use a single <script> block.

function Content_A() {  var x = document.getElementById("A");  if (x.style.display === "none") {    x.style.display = "block";  } else {    x.style.display = "none";  }}
function Hide_Content_B() {  var x = document.getElementById("B");  if (x.style.display === "block") {    x.style.display = "none";  } else {    x.style.display = "none";  }}
function Content_B() {  var x = document.getElementById("B");  if (x.style.display === "none") {    x.style.display = "block";  } else {    x.style.display = "none";  }}
function Hide_Content_A() {  var x = document.getElementById("A");  if (x.style.display === "block") {    x.style.display = "none";  } else {    x.style.display = "none";  }}Hide_Content_B();

<button class="button" onclick="Content_A(); Hide_Content_B();">Content    A</button>        <button class="button" onclick="Content_B(); Hide_Content_A();">Content    B</button><div id="A"> stuff</div><div id="B"> other stuff</div>

How to initially hide a div without a flash?

You need to calculate element height, which is possible by rendering element.

You can try visibility: hidden with position: absolute.
It won't create a white rectangle.

When rendering is done. You can reset position e.g position: unset (or default value).

Toggle the divs for show and hide slowly via Javascript or CSS

HTML:

<!--Inserting 3 buttons-->

<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>

<!--Inserting 3 divs-->

<div class="toggle-div">div 1</div>
<div class="toggle-div">div 2</div>
<div class="toggle-div">div 3</div>

CSS:

div.toggle-div {
  transition: 1s ease-out;
  height: 50px;
  overflow: hidden;
}

div.hidden {
  height: 0;
}

JS:

function change() {
  var x = document.querySelectorAll("#button");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].value == "Zeige Features") {
      x[i].value = "Verstecke Features";
    } else {
      x[i].value = "Zeige Features";
    }
  }
}

// Toggle show and hide divs

function showhide() {
  var x = document.querySelectorAll(".toggle-div");
  for (var i = 0; i < x.length; i++) {
    x[i].classList.toggle('hidden');
  }
}

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>

---

Related Topics