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') {
$b('.orderby').show();
}else{
$b('.orderby').hide();
}

This can be converted to

if (status=='open') {
document.querySelector('.orderby').style.visibility = "visible";
}else{
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
comb[i].style.display='none';
}
// this = the element used to trigger/fire the function
// getAttribute("item") = item="something"
//Display element by ID
document.getElementById(this.getAttribute("item")).style.display='block';
}
// Run when Page is ready
window.onload=function(){
//Get all area elements
var area=document.getElementsByTagName('area');
for(var i=0; i<area.length; i++){
//Set event Listener
area[i].addEventListener('click',toggle,false);
}
}

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) {
nextQuestion.style.display = "block"
}
}

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

Html

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

CSS

/* 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)

http://jsfiddle.net/dRpWv/665/

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 http://jsfiddle.net/gB4hk/2/

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

and

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


Related Topics



Leave a reply



Submit