Is there a way to hide a div with css only when you click a link. I'm making a popup that needs to be able to close when there is no JS. I've tried various methods but they have not worked when the button is inside the div that needs to hide.
when the button is inside the div that needs to hide.
Short answer: No, you can't achieve this when the button is inside the element. Thanks Joseph Marikle
However, you can achieve this when the button is outside the div.
#hide {
display: none;
}
label {
cursor: pointer;
text-decoration: underline;
}
#hide:checked ~ #randomDiv {
display: none;
}
<input type="checkbox" id="hide" />
<div id="randomDiv">
This is a div
<label for="hide">Hide div</label>
</div>
The following example hides the div when the checkbox is checked.
It uses the #closebutton ~ #targetdiv {... selector wich only works with its elements on this order. So the checkbox is placed inside of the main div on the layout but before of it on the code.
.main {
border-radius: 5px;
padding: 30px;
margin-bottom: 5px;
}
#A {
background: gold;
}
#B {
background: skyblue;
}
#C {
background: yellowgreen;
}
.close {
float: right;
margin-top: 30px;
margin-right: 75px;
height: 20px;
width: 20px;
}
.close:checked {
display: none;
}
.close:checked ~ #A, .close:checked ~ #B, .close:checked ~ #C {
display: none;
}
body {
overflow-y: scroll;
}
<div id=groupA><input class="close" type="checkbox">
<div id=A class=main>info A</div></div>
<div id=groupB><input class="close" type="checkbox">
<div id=B class=main>info B</div></div>
<div id=groupC><input class="close" type="checkbox">
<div id=C class=main>info C</div></div>
<html>
<head>
<style>
#hide{
z-index: 10000;
position: relative;
top: -54px;
padding: ;
width: 9%;
opacity: 0;
height: 22px;
}
#hide:checked~h2{
display: block;
}
h2{
display: none;
}
</style>
<title></title>
</head>
<body>
<h1>Click me</h1>
<input type="checkbox" id="hide" />
<h2>I'll appear when you click h1 !!!</h2>
</body>
</html>
Related
I would like some assistance with my accordion code,
My idea is to get something like this:
The Radio Button Method adds a hidden radio input and a label tag to each accordion tab.
The logic is straightforward:
when a user selects a tab, they essentially check the radio button associated with that tab.
when a user clicks the next tab in the accordion, the next radio button is selected, and so on.
Only one tab can be open at a time using this method.
I'd like some advice on how to incorporate this into my current accordion code.
<!doctype html>
<html>
<head>
<style>
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #6AAB95;
border-radius: 3px;
color: #FFF;
transition: ease .5s;
position: relative; /* ADDING THIS IS REQUIRED */
}
label:hover {
background: #4E8774;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #E2E5F6;
padding: 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 3px;
}
input + label + .collapse {
display: none;
}
input:checked + label + .collapse {
display: block;
}
</style>
</head>
<body>
<input type="checkbox" id="title1" />
<label for="title1">Accordion 1</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
<input type="checkbox" id="title2" />
<label for="title2">Accordion 2</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
</body>
</html>
No need to change the CSS (at least the part handling the accordion functionality) but you'd have to change a bit in your HTML.
To get the desired accordion effect where only one tab can be open at a time you should:
use radio buttons instead of checkboxes (input[type="radio"]).
And the important part is to give those radio buttons the same name (the attribute name must be the same for all the accordion component's radio buttons) in order to achieve the desired outcome.
Here's a a live demo:
/** nothing changed on the CSS part, see the HTML part for the required changes */
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #6AAB95;
border-radius: 3px;
color: #FFF;
transition: ease .5s;
position: relative;
/* ADDING THIS IS REQUIRED */
}
label:hover {
background: #4E8774;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked+label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #E2E5F6;
padding: 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 3px;
}
input+label+.collapse {
display: none;
}
input:checked+label+.collapse {
display: block;
}
<!-- changed "type=checkbox" to "type=radio" -->
<!-- added the same "name" attribute value for all the radio buttons -->
<input type="radio" name="radio-btn" id="title1" />
<label for="title1">Accordion 1</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
<!-- changed "type=checkbox" to "type=radio" -->
<!-- added the same "name" attribute value for all the radio buttons -->
<input type="radio" name="radio-btn" id="title2" />
<label for="title2">Accordion 2</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
CAUTION: Even though the radio buttons hack works as needed, there is no way you can close all the accordion items after interacting for the first time (you can have a closed accordion initially though).
I have found this example using Sass that looks exactly like what you need: https://codepen.io/alvarotrigo/pen/dyJbqpd.
The example uses radio buttons, such as <input type="radio" id="title1" name="select"/>. Because they have the same name, you can only select one at a time.
In your example, you have checkboxes like in this example at w3schools.com. Using checkboxes, you can tick any number of checkboxes at a time, therefore the current accordion behavior.
Here's a stripped-down version (converted to CSS):
input {
position: absolute;
opacity: 0;
z-index: -1;
}
.tab {
overflow: hidden;
}
.tab-label {
display: flex;
justify-content: space-between;
padding: 1em;
background: #2c3e50;
color: white;
cursor: pointer;
}
.tab-content {
max-height: 0;
padding: 0 1em;
color: #2c3e50;
background: white;
}
input:checked ~ .tab-content {
max-height: 100vh;
padding: 1em;
}
<div class="tab">
<input type="radio" id="rd1" name="rd">
<label class="tab-label" for="rd1">Item 1</label>
<div class="tab-content">Content</div>
</div>
<div class="tab">
<input type="radio" id="rd2" name="rd">
<label class="tab-label" for="rd2">Item 2</label>
<div class="tab-content">Content</div>
</div>
I have slightly changed your code and added another div with overflow: hidden:
/** nothing changed on the CSS part, see the HTML part for the required changes */
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #6AAB95;
border-radius: 3px;
color: #FFF;
transition: ease .5s;
position: relative;
/* ADDING THIS IS REQUIRED */
}
label:hover {
background: #4E8774;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked+label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #E2E5F6;
padding: 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 3px;
}
input+label+.collapse {
display: none;
}
input:checked+label+.collapse {
display: block;
}
<div class="tab">
<input type="radio" id="title1" name="select"/>
<label for="title1">Accordion 1</label>
<div class="collapse">
Your content goes here inside this division with the class "content".
</div>
</div>
<div class="tab">
<input type="radio" id="title2" name="select" />
<label for="title2">Accordion 2</label>
<div class="collapse">
Your content goes here inside this division with the class "content".
</div>
</div>
I learned checkbox hack on stackoverflow the other day and I successfully applied it to making a dialog to open on click of a text. However, now I want to close the dialog when "X" is clicked. Below is what I have attempted up to now, but to no avail:
https://jsfiddle.net/gmcy12zv/5/
HTML
<div style="height:100px">
</div>
<div class="tooltip">
<input type="checkbox" id="clickhere" />
<label for="clickhere">
<div class="click-msg">click here</div>
</label>
<div class="tooltiptext">
<input type="checkbox" id="closeCheck"/>
<label for="closeCheck">
<div class="close">
X
</div>
</label>
<h1 class="tooltip-title">should open on click</h1>
<p class="tooltip-msg"> close when X is clicked</p>
</div>
</div>
I want "tooltiptext" to disappear when X button for div "close" is clicked.
CSS
#clickhere {
display: none;
}
#clickhere:not(:checked) ~ .tooltiptext {
display:none;
}
#clickhere:checked ~ .tooltiptext {
visibility: visible;
}
#closeCheck {
display: none;
}
/* #closeCheck:not(:checked) ~.tooltiptext {
visibility: visible;
} */
#closeCheck:checked ~.tooltiptext {
display:none;
}
.click-msg{
font-weight: 400;
font-size: 10px;
line-height: 20px;
}
.tooltip-title {
font-weight: 700;
font-size: 10px;
line-height: 20px;
}
.tooltip-msg{
font-weight: 400;
font-size: 10px;
line-height: 20px;
}
.tooltip .close{
position: absolute;
top: 5px;
right: 5px;
}
.tooltip {
text-align: right;
position: relative;
display: block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
/* .tooltip:hover .tooltiptext {
visibility: visible;
} */
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
border-style: solid;
border-width: 5px;
}
.tooltip .tooltiptext {
width: 120px;
bottom: 150%;
left: 80%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
top: 100%;
left: 90%;
margin-left: -5px;
border-color: black transparent transparent transparent;
}
where am I going wrong in my approach ? is this because two checkboxes are almost nexted?
You are working with checkboxes. The checkbox hack in this case is not the best way. The "click here" text is actually a checkbox where you are providing a property checked in CSS ,this can be achived by adding another checkbox at the close button to work exactly as the one you used to open but I will not suggest that. I suggest the best practice is to use JavaScript click events. I have changed your code .I added some javascript and edited some HTML ansd CSS . Youn can check it out ,it works perfectly the way you wanted.
var dialog= document.querySelector(".tooltiptext");
var openBtn = document.querySelector(".price-line");
var closeBtn = document.querySelector(".close");
openBtn.addEventListener("click",()=>{
dialog.style.display ="block";
});
closeBtn.addEventListener("click",()=>{
dialog.style.display ="none";
})
.price-line{
font-weight: 400;
font-size: 10px;
line-height: 20px;
}
/*
.price-line:active .tooltiptext {
visibility: visible;
}
.tooltiptext:hover {
visibility: visible;
}
*/
.tooltip-title {
font-weight: 700;
font-size: 10px;
line-height: 20px;
}
.tooltip-msg{
font-weight: 400;
font-size: 10px;
line-height: 20px;
}
.tooltip .close{
position: absolute;
top: 5px;
right: 5px;
}
.tooltip {
text-align: right;
position: relative;
display: block;
}
.tooltip .tooltiptext {
display:none;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
/* .tooltip:hover .tooltiptext {
visibility: visible;
} */
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
border-style: solid;
border-width: 5px;
}
.tooltip .tooltiptext {
width: 120px;
bottom: 150%;
left: 80%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
top: 100%;
left: 90%;
margin-left: -5px;
border-color: black transparent transparent transparent;
}
<div style="height:100px">
</div>
<div class="tooltip">
<label for="clickhere">
<div class="price-line">click here</div>
</label>
<div class="tooltiptext">
<label for="closeCheck">
<div class="close">
X
</div>
</label>
<h1 class="tooltip-title">should open on click</h1>
<p class="tooltip-msg"> close when X is clicked</p>
</div>
</div>
Using only CSS.
Place the #closeCheck on top of .tooltip or .tooltiptext:
<input type="checkbox" id="closeCheck" />
<div class="tooltip"><!...->
Next hide #closeCheck and when it's checked hide .tooltiptext
#closeCheck {display:none;}
#closeCheck:checked + .tooltip .tooltiptext {display: none;}
That "+" is an adjacent sibling combinator which singles out the tag
positioned immediately next.
Example A is the fixed OP code
Example B is a different layout with a better strategy.
Example A
#closeCheck {
display: none;
}
#closeCheck:checked+.tooltip .tooltiptext {
display: none;
}
<input type="checkbox" id="closeCheck" />
<div class="tooltip">
<input type="checkbox" id="clickhere" />
<label for="clickhere">
<div class="click-msg">click here</div>
</label>
<div class="tooltiptext">
<label for="closeCheck">
<div class="close">
X
</div>
</label>
<h1 class="tooltip-title">should open on click</h1>
<p class="tooltip-msg"> close when X is clicked</p>
</div>
</div>
Example B
.dialog {
margin-bottom: 8px;
}
legend,
menu {
display: inline-block;
float: right;
}
label {
padding: 3px 5px;
border: 2px inset lightgrey;
border-radius: 4px;
cursor: pointer;
}
#switchA,
#switchB,
.dialog {
display: none
}
#switchA:checked+.open {
display: none
}
#switchA:checked~.dialog.A {
display: block;
}
#switchB:checked+.dialog.B {
display: block;
}
<input id='switchA' type='checkbox'>
<label for='switchA' class='open A'>Open</label>
<fieldset class='dialog A'>
<legend><label for='switchA'>X</label></legend>
<p>Beth, your son is dying! Say good-bye! Yo! What up my glip glops! Crystal poachers. There's no lower form of life. They think the galaxy's their own personal piggy bank. You can run, but you can't hide bitch! </p>
<menu>
<label for='switchA'>Cancel</label>
<label for='switchB'>Next</label>
</menu>
</fieldset>
<input id='switchB' type='checkbox'>
<fieldset class='dialog B'>
<legend><label for='switchB'>X</label></legend>
<p>Where are my testicles, Summer? I'm man enough to simply say, 'I'm going to poop', and I'd be honored to have Ron Howard involved. Dont look at me! That guy over there roped me into this. Dont mind those stare goblins.</p>
<menu>
<label for='switchB'>Cancel</label>
</menu>
</fieldset>
I want to use the checkbox-trick to show my mobile navbar. Somehow the h1 isn't showin up even when the invisible checkbox is checked. What have I done wrong?
#label {
margin-left: auto;
margin-right: auto;
color: #000000;
font-size: 35px;
cursor: pointer;
width: 47px;
}
h1 {
display: none
}
#toggle {
display: none;
}
#toggle:checked + h1 {
display: block;
}
<div id="hamburgermenu">
<label id="label" for="toggle">☰</label>
<input id="toggle" type="checkbox">
</div>
<h1>DEMO ELEMENT</h1>
You're using "+" which is a sibling CSS selector, but <h1> isn't a sibling of your checkbox. It's a sibling of the checkbox's parent container. You can have 3 ways to go about it.
First way: Make it the sibling of the input by placing it inside
#label {
margin-left: auto;
margin-right: auto;
color: #000000;
font-size: 35px;
cursor: pointer;
width: 47px;
}
h1 {
display: none
}
#toggle {
display: none;
}
#toggle:checked+h1 {
display: block;
}
<div id="hamburgermenu">
<label id="label" for="toggle">☰</label>
<input id="toggle" type="checkbox">
<h1>DEMO ELEMENT</h1>
</div>
Second way: Make it the sibling of the input by taking the input out of the container
#label {
margin-left: auto;
margin-right: auto;
color: #000000;
font-size: 35px;
cursor: pointer;
width: 47px;
}
h1 {
display: none
}
#toggle {
display: none;
}
#toggle:checked + h1 {
display: block;
}
<div id="hamburgermenu">
<label id="label" for="toggle">☰</label>
</div>
<input id="toggle" type="checkbox">
<h1>DEMO ELEMENT</h1>
Third way: Make use of javascript.
So the issue I can't seem to solve is how to move the obscured divs under the radio+label buttons.
My Html
My CSS
/*color palette: abls
[lightest to darkest]
#eeeeee
#eaffc4
#b6c399
#6a856a
#333333
*/
body {
background-color: #333333;
font-family: monospace;
display: flex;
justify-content: center;
}
div {
/*background-color: red;*/
width: 100%;
height: 100%;
justify-content: center;
}
/*aesthetics for header*/
.Ghead {
font-size: 250%;
color: #eeeeee;
font-weight: lighter;
text-align: center;
border-color: red;
}
/*color for the 3 lines*/
hr:nth-child(1) {
border-color: #eaffc4;
max-width: 20%;
}
hr:nth-child(2) {
border-color: #b6c399;
max-width: 25%;
}
hr:nth-child(3) {
border-color: #6a856a;
max-width: 30%;
}
/*style for radio button container*/
.mGalD {
position: relative;
/*background-color: blue;*/
display: flex;
}
input[type=radio] {
display:none;
}
/*handles aesthetics of active buttons*/
label {
padding: 5px 7px;
border-radius: 5px;
display: inline-block;
font-size: 14px;
color: #6a856a;
}
input:checked + label {
background-color: #eaffc4;
}
/*handles the appearance of active divs in the display area*/
label + div {
position: relative;
color: red;
border: 2pt solid #eaffc4;
border-radius: 5px;
margin: 5px 0 0 0;
display: none;
max-width: 50%;
}
input:checked + label + div {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="./NewbTests.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="./Assets/SumisoulLogo.png">
<title>Viewport</title>
</head>
<body>
<div>
<h1>
<!--title and aesthetics for the head of the page-->
<div class="Ghead">
Viewport
<hr>
<hr>
<hr>
</div>
</h1>
<!--Labeled Radio buttons which activate css to reveal divs-->
<div class="mGalD">
<input type="radio" name="gal" id="g1" value="1">
<label for="g1">gallery 1</label><div>one</div>
<input type="radio" name="gal" id="g2" value="2">
<label for="g2">gallery 2</label><div>two</div>
<input type="radio" name="gal" id="g3" value="3">
<label for="g3">gallery 3</label><div>three</div>
</div>
</div>
</body>
</html>
I would have linked a few images to illustrate what is happening but I'm limited in links.
In essence;
Before:
(button 1)(button 2)(button 3)
Upon clicking any button:
(button 1)[_______________________] (button 2)(button 3)
The div shows up on the side of the corresponding button.
I don't really know what to do to have it align in a column without separating all of the divs and breaking the inline style of the buttons
Hope this works
body, html {
padding: 0;
margin: 0;
}
body {
background: linear-gradient(top left, red, orange);
}
span {
display: none;
position: absolute;
max-width: 450px;
left: 17px;
top: 48px;
padding: 3px;
min-height: 30px;
border-top: 1px solid #d3d3d3;
}
label {
cursor: pointer;
display: inline-block;
padding: 10px;
margin: 10px 0 0 0;
background: #e0e0e0;
color: black;
}
label:first-child {
margin-left: 10px;
}
input {
display: none;
}
input:checked + span {
display: initial;
}
h3 {
border-top: 1px solid;
padding-top: 5px;
position: absolute;
top: 150px;
left: 15px;
}
<label for="btn_one">Gallery 1</label>
<input type="radio" id="btn_one" name="nesto" checked="checked"/>
<span class="tab1">Gallery One</span>
<label for="btd_two">Gallery 2</label>
<input type="radio" id="btd_two" name="nesto"/>
<span class="tab2">Gallery two</span>
<label for="btd_tree">Gallery 3</label>
<input type="radio" id="btd_tree" name="nesto"/>
<span class="tab2">Gallery Three</span>
I am trying to create a pulldown menu using a form input checkbox and a label with an icon, so when the user clicks on the icon the menu opens or closes according to the checked state of the checkbox.
It works well in all browsers except for IE. What is intriguing is that if I click on text inside the label next to the icon image, it works, but not when clicking on the image icon itself.
Below follows a minimal example of this type of menu. Any hints on why this does not work only for IE (even newer versions) would be appreciated.
<html lang="en">
<head>
<title>Menu Test</title>
<style>
.menu-items {
position: absolute;
border-color: #cccccc;
border-style: solid;
border-width: 1px;
padding: 4px;
top: 40px;
}
#navigation-menu .menu-items {
display: none;
}
#navigation-button:checked + .menu-items {
display: inline-block;
}
#navigation-menu input[type="checkbox"],
#navigation-menu ul span.drop-icon {
display: inline;
}
</style>
</head>
<body>
<form>
<div id="navigation-menu">
<input type="checkbox" id="navigation-button">
<div class="menu-items">
<div>Option 1</div>
<div>Option 2</div>
</div>
<label for="navigation-button" id="navigation-label">
<span class="drop-icon">
X<img src="http://uxrepo.com/static/icon-sets/dripicons/png32/24/000000/menu-24-000000.png" width="24" height="24">X
</span>
</label>
</div>
</form>
</body>
</html>
Adding the following workaround for IE solves the problem:
label{
display: inline-block;
}
label img{
pointer-events: none;
}
<html lang="en">
<head>
<title>Menu Test</title>
<style>
.menu-items {
position: absolute;
border-color: #cccccc;
border-style: solid;
border-width: 1px;
padding: 4px;
top: 40px;
}
#navigation-menu .menu-items {
display: none;
}
#navigation-button:checked + .menu-items {
display: inline-block;
}
#navigation-menu input[type="checkbox"],
#navigation-menu span.drop-icon {
display: inline;
}
label{
display: inline-block;
}
label img{
pointer-events: none;
}
</style>
</head>
<body>
<form>
<div id="navigation-menu">
<input type="checkbox" id="navigation-button">
<div class="menu-items">
<div>Option 1</div>
<div>Option 2</div>
</div>
<label for="navigation-button" id="navigation-label">
<span class="drop-icon">
X<img src="http://uxrepo.com/static/icon-sets/dripicons/png32/24/000000/menu-24-000000.png" width="24" height="24">X
</span>
</label>
</div>
</form>
</body>
</html>
Note that you have unneccessary ul in the line #navigation-menu ul span.drop-icon {