Show Hide Divs on Click in HTML and CSS Without Jquery

Show hide divs on click in HTML and CSS without jQuery

Using label and checkbox input

Keeps the selected item opened and togglable.

.collapse{  cursor: pointer;  display: block;  background: #cdf;}.collapse + input{  display: none; /* hide the checkboxes */}.collapse + input + div{  display:none;}.collapse + input:checked + div{  display:block;}
<label class="collapse" for="_1">Collapse 1</label><input id="_1" type="checkbox"> <div>Content 1</div>
<label class="collapse" for="_2">Collapse 2</label><input id="_2" type="checkbox"><div>Content 2</div>

show / hide div can do without jquery?

You only have 1 tiny bit of jquery in your code

if (status=='open') {

This can be converted to

if (status=='open') {
document.querySelector('.orderby').style.visibility = "visible";
document.querySelector('.orderby').style.visibility = "hidden";

Hide and Show Divs without using Jquery

I have given a detailed step by step, this should work just like the current source code you have but without the use of jQuery.

function toggle(){
//Get all elements with the class comb
var comb=document.getElementsByClassName('comb');
//Loop through all elements
for(var i=0; i<comb.length; i++){
//Hide all elements
// this = the element used to trigger/fire the function
// getAttribute("item") = item="something"
//Display element by ID
// Run when Page is ready
//Get all area elements
var area=document.getElementsByTagName('area');
for(var i=0; i<area.length; i++){
//Set event Listener

If you have any questions, please leave a comment below and I will get back to you as soon as possible.

I hope this helps. Happy coding!

Onclick show/hide a div -only css and without href. NO jquery

There is a trick way to achieve your goal using Check box hack

See the example bellow

#myid {  display: none;}
#mylabel:after { content: 'Hello';}
#myid:checked~#mylabel:after { content: 'Close';}
<div>  <input id="myid" type="checkbox">  <label id="mylabel" for="myid"></label></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) { = "block"

How to show/hide div on click with stricly HTML/CSS


<label for="toggle-1"> Button </label>
<input type="checkbox" id="toggle-1">
<div class="facebook"> Facebook Content</div>


/* Checkbox Hack */

input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
label {
-webkit-appearance: push-button;
-moz-appearance: button;
display: inline-block;
margin: 60px 0 10px 0;
cursor: pointer;

/* Default State */
.facebook {
background: green;
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;

/* Toggled State */
input[type=checkbox]:checked ~ .facebook {
display: none;

fiddle Here And more About this csstricks

how to do show/hide div with slide in Javascript (without jQuery)

Here ya go. Makes use of CSS3 transition to smoothly animate the slide (much more smoothly than jQuery could ever manage, I might add).

Since display is not transitionable, it uses height instead with overflow:hidden (which is how jQuery does it internally, I think). Uses scrollHeight to determine target height.

Show / hide div closes when clicking anywhere outside (CSS only)

have you tried experimenting with

.collapse > * + *:hover {
display: block !important;

Show/ hide div depending on dropdown selection using pure javascript - no jquery

like this

<select name="b_company" id="b_company" onchange="showHideInput(this)">
<option value="0" selected="selected">Individual</option>
<option value="1">Company</option>


function showHideInput(sel) {
var value = sel.value;
document.getElementById('vat').style.display = 'none';
document.getElementById('vat').style.display = 'block';

Related Topics

Leave a reply