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
Input Value Is a String Instead of a Number
Very Simple, Very Smooth, JavaScript Marquee
How to Check Connection Type (Wifi/Lan/Wwan) Using Html5/JavaScript
Positioning ≪Div≫ Element At Center of Screen
How to Change the Style of Alert Box
Accessing a CSS Custom Property (Aka CSS Variable) Through JavaScript
How to Add Multiple Classes to a Reactjs Component
Execute a Command Line Binary With Node.Js
How to Find Documentation on Formatting a Date in JavaScript
Dynamically Creating HTML Elements Using JavaScript
Typeerror: P.Easing[This.Easing] Is Not a Function
Html5 Local Storage Fallback Solutions
Print ≪Div Id="Printarea"≫≪/Div≫ Only
How to Disable a CSS :Hover Effect Via JavaScript
Disable Drag and Drop on HTML Elements
Execjs::Runtimeerror on Windows Trying to Follow Rubytutorial