I have a simple html/css toggle set up
#toggle1 {
display: none;
}
#toggle1:target {
display: block;
}
#toggle2 {
display: none;
}
#toggle2:target {
display: block;
}
Show1<br />
Show2
<p id="toggle1">1</p>
<p id="toggle2">2</p>
This works as desired by showing and hiding. However I want the initial paragraph to be visible upon page load. If I remove the #toggle1 {display: none;} it does not work properly.
Any assistance would be most helpful and appreciated.
Thanks in advance.
This is just a bit of a hack, but if you reverse the order of the hidden elements, add display:block to the "default" one and then add display:none to :target ~ #toggle1 it should simulate a default selected item:
#toggle1, #toggle1:target, #toggle2:target {
display: block;
}
:target ~ #toggle1, #toggle2 {
display: none;
}
Show1<br />
Show2
<p id="toggle2">2</p>
<p id="toggle1">1</p>
Related
I have a container and three parts in it. I want to make unvisible thirth part while addind class to the parent container. But my codes not works...
Here is the HTML code:
<section id="parts" class="two-parts">
<div id="partOne">...</div>
<div id="partTwo">...</div>
<div id="partThree">...</div>
</section>
Here is the SCSS code:
#partThree{
display: block;
.two-parts &{
display: none;
}
}
I want to hide #partThree div, when #parts div has .two-parts class.
Guys! I found the problem. I checked the output of Scss to Css, and here is the Css output:
.two-parts body #parts #partThree {
display: none;
}
It should be #parts.two-parts #partThree. But why is that goes to the top of all elements?
As I have answered in your other post:
It looks like your code is wrapped by a body-tag and a #parts-tag. This means you need to change your code to this:
#partThree{
display: block;
}
&.two-parts #partThree {
display: none;
}
The & takes EVERYTHING before the current line. So if your final SCSS is:
body {
#parts {
#partThree {
display: block;
.two-parts & {
display: none;
}
}
}
}
Then the & will add .two-parts before everything else, and make it:
.two-parts body #parts #partThree {
display: none;
}
The easiest way to achieve what you need is by setting .two-parts and #partThree as siblings, and apply ~ css operator.
<style>
#partThree {
display: block;
.two-parts ~ {
display: none;
}
}
<style>
<section id="parts">
<div id="partOne">...</div>
<div id="partTwo" class="two-parts">...</div>
<div id="partThree">...</div>
</section>
this will only work if #partThree and .two-parts siblings and .two-parts comes before.
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>
It looks like when checkbox is wrapped by a label element, we can still toggle it even if we have set the display property to none.
label input {
display: none;
}
label span.y {
display: none;
}
label span.n {
display: inline;
}
label input:checked~span.y {
display: inline;
}
label input:checked~span.n {
display: none;
}
<label>
<input type="checkbox">
<span class="y">Checked!</span>
<span class="n">Click me!</span>
</label>
it confuses me a lot, i'll appreciate it if you can explain it for me
as per on w3cschool - label provides a usability improvement for mouse users, because if the user clicks on the text within the element, it toggles the control.
I want to change the displayed image, when the curosor is hovering over the a tag with plain css
My guess was to write something like this, but it didnt work:
.folder a:hover > .folder img{
content: url(new picture);
}
here is my code
html:
<div>
<div class="folder">
<img></img>
folder1
</div>
...
</div>
css:
.folder img{
content:url(pictures/folderdarkblue.png);
}
It will be quite hard to do that using plain css with your current html code due to css not really allowing backward navigation. If you don't mind using the <a> after your image, you could try doing this:
https://jsfiddle.net/ksec65wm/
<div class="folder">
folder1
<img class='one' src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png"/>
<img class='two' src="http://www.w3schools.com/images/colorpicker.png"/>
</div>
CSS:
img.one {
display:none;
}
a:hover ~ img.one {
display: inline-block;
}
a:hover ~ img.two {
display:none;
}
Instead of trying to change picture on the hover of each individual div, why don't you try setting the opacity to 0, and then add the next picture?
Some hints
.box-container:hover .image-container,
.box-container:hover #picture {
opacity: 0;
}
Heres an example I found that is quite nice as well
https://jsfiddle.net/m4v1onyL/
The basic css goes as the following
a img:last-child {
display: none;
}
a:hover img:last-child {
display: block;
}
a:hover img:first-child {
display: none;
}
As you can see we just toggle between two images like this in an <a> tag.
I have some css lines that allow me to hide/show a div. I would like to have links in this div, but when I test the link, it ends up hiding the div, it does not actually follow the link.
So, I want to be able to show the content, click the link. The content should remain open, and the link should be followed. Hope this makes sense!
<p>some text I want to show</p>
[...]
[...]
<div id="list">
<p>bla bla, you should look on google</p>
</div>
css
.show {
display: none;
}
#list {
display: none;
}
.hide:focus + .show {
display: inline;
}
.hide:focus {
display: none;
}
.hide:focus ~ #list {
display: block;
}
I also made my first fiddle.
As always, any help is appreciated!
Using Javascript/Jquery
Jquery
jQuery(function($){
$('#hideme').click(function(){
$('#list').addClass('hidden')
$('#list').removeClass('expand')
})
})
jQuery(function($){
$('#showme').click(function(){
$('#list').addClass('expand')
$('#list').removeClass('hidden')
})
})
DEMO
Using Pure CSS
HTML
<p>some text I want to show</p>
<div>
[...]
[...]
<p id="list">bla bla, you should look on google</p>
</div>
CSS
.hide:focus + .show + #list{
display:none;
}
.show:focus + #list{
display:block ;
}
#list{
display:none;
}
DEMO