my function is hide and show div with pure css but when i click open, the button still not disappear.
Open
<div id="show">
some text...
Close
</div>
and the css look like:
<style>
#show {display: none; }
#show:target { display: inline-block; }
#hide:target ~ #show { display: none; }
<style>
when i add this :
#show:target ~ #open { display: none; }
the button #open still not hiding
anyone can help me.
thanks before :)
You could solve it by putting your Open link inside the #show div
jsFiddle
HTML
<div id="show">
Open
<div id="content">
some text...
Close
</div>
</div>
CSS
#content {
display: none;
}
#show:target #content {
display: inline-block;
}
#show:target #open {
display: none;
}
The click functionality can be implemented using Checkbox for pure css. I modified your HTML as follows:
HTML
<input id="checkbox" type="checkbox" class="checkbox" />
<label id="open" for="checkbox" class="btn btn-default btn-sm"> <span class="show-text"></span>
</label>
<div id="show">some text...
<label for="checkbox" class="second-label btn btn-default btn-sm">Close</label>
</div>
CSS
:checked ~ .btn-default, #show, .checkbox {
display: none;
}
:checked ~ #show {
display: block;
}
.show-text:after {
content:"Open";
}
:checked + .show-text:after {
content:"";
}
.second-label, .show-text {
text-decoration: underline;
cursor: pointer;
}
Working Fiddle
Mr_Green Thank you for that code. I modified it for a responsive expanding menu on mobile devices
HTML
<input id="menu-toggle" type="checkbox" class="checkbox-toggle" />
<label id="open" for="menu-toggle" class="btn btn-default">Menu</label>
<div id="show">
Some Content
</div>
CSS
#media (max-width: 650px) {
input.checkbox-toggle + label {
display: block;
padding:.7em 0;
width:100%;
background:#bbbbbb;
cursor: pointer;
text-align:center;
color:white;
Text-transform:uppercase;
font-family:helvetica, san serif;
}
input.checkbox-toggle:checked + label {
background:#6a6a6a;
}
#show {
display: none;
}
input.checkbox-toggle:checked ~ #show {
display: block;
}
}
input.checkbox-toggle {
display: none;
}
Related
Hi:) I'm trying to run the simplest example of :not(:placeholder-shown) and its not workings.Here is a link to my codepen. https://codepen.io/yael-screenovate/pen/eYJEqRB?editors=1100 what did i do wrong? thanx by advance. Heres the code:
button {
display: none;
}
input:not(:placeholder-shown)+button {
display: block;
}
<div>
<input/>
<button>hi there</button>
</div>
It's because you didn't set any placeholder attribute.
button {
display: none;
}
input:not(:placeholder-shown)+button {
display: block;
}
<input placeholder="placeholder"/>
<button>hi there</button>
It makes more sense not to use the :not but do the whole logic the opposite:
button {
display: block;
}
input:placeholder-shown+button {
display: none;
}
<input placeholder="placeholder" />
<button>hi there</button>
I found a code to show and hide content. It is a very easy code but the content disappears even if you click on the content in the box. There is no js just CSS. Please help me fix this problem.
.span3:focus~.alert {
display: none;
}
.span2:focus~.alert {
display: block;
}
.alert {
display: none;
}
<span class="span3" tabindex="0">Hide Me</span>
<span class="span2" tabindex="0">Show Me</span>
<p class="alert">Some alarming information here</p>
Add focus/hover state to the alert also:
.span3:focus~.alert {
display: none;
}
.span2:focus~.alert {
display: block;
}
.alert {
display: none;
outline: none;
}
.alert:focus,
.alert:hover /*the hover is mandatory in this case*/{
display: block;
}
<span class="span3" tabindex="0" >Hide Me</span>
<span class="span2" tabindex="0">Show Me</span>
<p class="alert" tabindex="0">Some alarming information here</p>
UPDATE
If you want to keep the alert always visible until you click on hide me, you can try this:
.span3 {
position:relative;
z-index:1; /*Make it above the alert*/
}
.span3:focus~.alert {
display: none;
}
.span2:focus~.alert {
display: block;
}
.alert {
display: none;
outline: none;
}
.alert:focus,
.alert:hover /*Here the hover is mandatory*/{
display: block;
}
/*Cover the whole screen and keep the hover on the alert*/
.alert:after {
content:"";
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
}
<span class="span3" tabindex="0" >Hide Me</span>
<span class="span2" tabindex="0">Show Me</span>
<p class="alert" tabindex="0">Some alarming information here</p>
Do you need to click on the div and rather not pass on it? In this case, hover can be a good solution. Look at that code:
Demo here
.span3:focus ~ .alert {
display: none;
}
.span2:focus ~ .alert {
display: block;
}
.alert {
display: none;
}
.alert:hover {
display:block;
}
<span class="span3" tabindex="0">Hide Me</span>
<span class="span2" tabindex="0">Show Me</span>
<p class="alert" >Some alarming information here</p>
Have a good day.
I created a simple input type file placeholder like this:
input[type="file"] {
display: none;
}
.image .first {
display: none;
}
.image .second {
display: block;
}
.image:hover .first {
display: block;
}
.image:hover .second {
display: none;
}
<div class="image">
<input type="file" id="file-input" />
<label for="file-input">
<div class="first" style="height: 40px;background-color: red;"></div>
<div class="second" style="height: 40px;background-color: blue;"></div>
</label>
</div>
Whenever, I hover over the .image element I need to display .first and hide .second. This is happening successfully if I don't click on the file-input label.
However, when click on file-input label, the hover state persists(the red div shows) even after navigating away.
Here's a pen.
The following CSS checkbox hack works under the assumption that the content is a sibling of the checkbox. When the label is clicked, the content is toggled.
DEMO
<input id="checkbox" type="checkbox" />
<label for="checkbox">
Toggle content
</label>
<div class="content">Content here</div>
#checkbox {
display: none;
}
#checkbox:not(:checked) ~ .content {
display: none;
}
Can the same effect be achieved using CSS only if the content is not a sibling of the checkbox? For example:
<div>
<input id="checkbox" type="checkbox" />
<label for="checkbox">
Toggle content
</label>
</div>
<div class="content">Content here</div>
You could do it with the :target pseudo class and using anchors instead of a checkbox. Ugly as hell but CSS only:
a {
color: #000000;
text-decoration: none;
}
#off {
display: none;
}
.content {
display: none;
}
#your-target:target ~ .content {
display: block;
}
#your-target:target #on {
display: none;
}
#your-target:target #off {
display: block;
}
<div id="your-target">
<a id="on" href="#your-target">
Toggle content
</a>
<a id="off" href="#">
Toggle content
</a>
</div>
<div class="content">Content here</div>
I'm sure there is a simple solution. I have two labels associated with two checkboxes, and each of them shows their corresponding div. The thing is I have to hide div1 when I click on checkbox2 and show div2, and vice-versa.
/* Default State */
.hombres, .mujers{
display: none;
}
/* Toggled State */
input[type=checkbox]#hombre:checked ~ div.hombres {
display:block;
background-color: #f04e10;
}
input[type=checkbox]#mujer:checked ~ div.mujers {
display:block;
background-color: #f04e10;
}
input[type=checkbox]#hombre:checked ~ div.mujers {
display: none;
}
input[type=checkbox]#mujer:checked ~ div.hombres {
display: none;
}
<label for="hombre">Hombre</label>
<input type="checkbox" id="hombre">
<label for="mujer">Mujer</label>
<input type="checkbox" id="mujer">
<div class="hombres"><p>Hombre</p></div>
<div class="mujers"><p>Mujer</p></div>
Any idea?
Change the checkboxes to radio buttons with the same name like this: jsfiddle.net
/* Default State */
.hombres, .mujers{
display: none;
}
/* Toggled State */
input[type=radio]#hombre:checked ~ div.hombres {
display:block;
background-color: #f04e10;
}
input[type=radio]#mujer:checked ~ div.mujers {
display:block;
background-color: #f04e10;
}
input[type=radio]#hombre ~ div.mujers {
display: none;
}
input[type=radio]#mujer ~ div.hombres {
display: none;
}
<label for="hombre">Hombre</label>
<input type="radio" id="hombre" name="demo">
<label for="mujer">Mujer</label>
<input type="radio" id="mujer" name="demo">
<div class="hombres"><p>Hombre</p></div>
<div class="mujers"><p>Mujer</p></div>