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
Show / Hide Div on Click with JavaScript
You are trying to access an element by id but haven't specified an id for the element yet.
You could do it like this:
const divHide = document.getElementById("div-hide");
function handleHide(){
divHide.style.display = "none";
}
function handleShow(){
divHide.style.display = "block";
}<div id="div-hide">
Hello
</div>
<button onclick="handleHide()">
click to hide
</button>
<button onclick="handleShow()">
click to show
</button>Show and hide divs when click button
The JS toggle function is good for toggling classes on and off.
Here's a simple example
let btn = document.getElementById("btn-login");
let div = document.getElementById("loglog");
btn.addEventListener("click", () => {
div.classList.toggle('hide');
}).hide {
display: none;
}<button id="btn-login">Unshow/show</button>
<div id="loglog">Stuff to unshow on button click and show on the next button click</div>How to show hidden div onclick of button and hide when not in focus using JS
you can use this code :
function openCardsList() {
let window = document.getElementById("anchor-cards-list");
window.style.display = "block";
}
function hideDiv(){
let window = document.getElementById("anchor-cards-list");
window.style.display = "none";
}
and add onclick event to parent div
div onclick="hideDiv()" style="height: 100vh;">
<div class="collapse" id="anchor-cards-list">Lorem Ipsum</div>
</div>
How to make show/hide div with a toggle using CSS?
you would have to change the structure and use a pseudo to insert an arrow:
example
.drop { cursor: pointer; display: block; background: #090;}
input[type="checkbox"] { display: none; /* hide the checkboxes */}
input +.drop + div
{ display:none;}.drop:after { content:'▼'; }:checked + .drop:after { content:'▲'; }input:checked + .drop + div{ display:block;}<input id="_1" type="checkbox"> <label class="drop" for="_1">Collapse 1 </label>
<div>Content 1</div>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>Hide and show divs with click events
Extract your logic into a separate function, then use the e.target to extract the specific id of the list item, then convert it to the id of the div you want to show.
This way you can easily handle 10, 100 or even 1000+ li/div pairs to hide and show.
var showHide = document.querySelector("ul");var divElements = document.querySelectorAll("div");
function showHideElement(element) { var itemId = element.id || ""; var divId = itemId.replace("list", "div"); divElements.forEach(function (element) { element.style.display = "none"; }); document.getElementById(divId).style.display = "block";}
showHide.addEventListener("click", function(e) { showHideElement(e.target);});div { display: none;}<ul> <li id="list1">list 1</li> <li id="list2">list 2</li> <li id="list3">list 3</li></ul>
<div id="div1"> <p>Text 1 goes there...</p></div>
<div id="div2"> <p>Text 2 goes there...</p></div>
<div id="div3"> <p>Text 3 goes there...</p></div>Javascript show/hide div onclick
You dont even need JS for it. You can do it solely with HTML and CSS with the use of anchors and :target like in the snippet below.
#html-show, #css-show, #js-show {
display: none;
}
#html-show:target, #css-show:target, #js-show:target {
display: block;
}<!--Nav-Bar-->
<a href="#html-show">Show HTML</a>
<a href="#css-show">Show CSS</a>
<a href="#js-show">Show JS</a>
<!--HTML-->
<div class="html" id="html-show">
<p class="text-html" id="htmlContent">HTML Content..
</p>
</div>
<!--CSS-->
<div class="css" id="css-show">
<p class="text-css" id="cssContent">CSS Content..
</p>
</div>
<!--JS-->
<div class="js" id="js-show">
<p class="text-js" id="jsContent">JS Content..
</p>
</div>Related Topics
Is Background-Position-X (Background-Position-Y) a Standard W3C CSS Property
Css Media Query to Target Only iOS Devices
What Does an Asterisk Do in a CSS Property Name
@Font-Face Eot Not Loading Over Https
How to Make a Footer Fixed in the Page Bottom
How to Include a Font Awesome Icon in My Svg
Bootstrap 4 Card-Deck with Number of Columns Based on Viewport
How to Specify Different Widths for Columns in CSS3
Css3 Animation Not Working in Safari
Css Background Opacity With Rgba Not Working in Ie 8
Css3 Cross Browser Linear Gradient
Css Page-Break Not Working in All Browsers
Invalid CSS Selector Causes Rule to Be Dropped: What Is the Rationale