I'm trying to utilize the CSS checkbox hack to toggle Display:None and Display:Block for multiple sections of one page. I have image gallery sets split by year and starting hidden, and would like to be able to click the year to toggle that specific gallery's display. The point I'm stuck at is whenever I click one of the labels, everything below it toggles, not just the section contained within the tag I'm trying to specifically toggle.
Here is what I have so far.
CSS Code
.hide {
display:none;
}
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
input[type=checkbox]:checked ~ .hide {
display:block;
}
label {
display: block;
background: white;
padding: 5px;
border: 0px solid rgba(0,0,0,.1);
border-radius: 2px;
color: black;
font-weight: bold;
}
And the HTML
<input type="checkbox" id="toggle_2012">
<label for="toggle_2012">2012</label><br>
<div class="hide">
<a class="fancybox" rel="2012" href="imgs/fb/3_b.jpg"><img src="imgs/fb/3_s.jpg" alt="Image 3"/></a>
<a class="fancybox" rel="2012" href="imgs/fb/4_b.jpg"><img src="imgs/fb/4_s.jpg" alt="Image 4"/></a>
</div>
<input type="checkbox" id="toggle_2013">
<label for="toggle_2013">2013</label><br>
<div class="hide">
<a class="fancybox" rel="2013" href="imgs/fb/1_b.jpg"><img src="imgs/fb/1_s.jpg" alt="Image 1"/></a>
<a class="fancybox" rel="2013" href="imgs/fb/2_b.jpg"><img src="imgs/fb/2_s.jpg" alt="Image 2"/></a>
</div>
(Jquery/Fancybox is being used to display the images, which is why they are classed for Fancybox)
Any help would be greatly appreciated. This is my first time working with the checkbox hack, but to my understanding having unique ID's for the input/label should work. Not sure what I'm missing here.
Thanks in advance.
Your css selector ~ affects every following element with that class. try:
input[type=checkbox]:checked + label + .hide
you may have to remove the <br> for this to work.
This is a few months on, and possibly you found your solution by now, but for the benefit of anyone finding this thread, here's my solution. Firstly, You were correct in giving the checkbox an ID (CLASS would also work in some situations), however you must actually reference that ID in your CSS.
Instead of:
input[type=checkbox]:checked ~ .hide {
display:block;
}
Try this:
#toggle_2013:checked ~ .hide {
display:block;
}
Without specifically identifying the checkbox in your CSS aswell as in the HTML, the first suitable checkbox in the DOM will be activated rather than the one you want.
Hope this helps.
Related
I am looking to have the 'item value appears here' to be hidden by default on landing on the page or refreshing. I am using a checkbox with a label to be used as the show/hide click. This appears in 3 columns and currently clicking 'show' on the left column makes all 3 item values appear (this is not a problem and as I do not wish to use JavaScript, happy with this, although if clicking on one only unhides one value with css then I'm all ears!).
I am not able to use JavaScript and feel there must be a way to do this with CSS using checkboxes - any help will be greatly appreciated!
<div class="key-items-wrapper">
<div class="left-column">
<img src="/images/item.png">
<div class="center-column-text">
<p>item name</p>
<div class="content">
<p>item value appears here</p>
</div>
<input id="checkbox-privacymode" type="checkbox">
<label for="checkbox-privacymode"></label>
</div>
</div>
This is the code for the checkbox
#checkbox-privacymode {
display: none;
visibility:hidden;
}
#checkbox-privacymode + label {
display: block;
padding-right: 52px;
height: 35px;
background: transparent url(/images/eye-hidden.png) no-repeat scroll right center;
float: right;
font-size: 0.9em;
color: #777;
cursor: pointer;
}
#checkbox-privacymode + label::before {
content: 'hide';
}
#checkbox-privacymode:checked + label {
background-image: url(/images/eye.png);
display:block;
}
#checkbox-privacymode:checked + label::before {
content: 'show';
}
Many Thanks
Change <input id="checkbox-privacymode" type="checkbox"> to <input id="checkbox-privacymode" type="checkbox">
You will need to reposition your HTML elements so that the message is immediately after the checkbox.
Once the message is correctly positioned in the HTML code, in CSS you can select the message like this:
#checkbox-privacymode:checked + p {
display: none;
}
I am trying to display text under my image but it wont work. My image displays but not my text.
The textarea appears but it has no text and I cannot click and write on it. Although if I Ctrl+F it says the words are there but I cant see them nor are they highlighted
<div id = "folderlist">
<a href="">
<image src="${resource(dir: 'images', file: 'folderimg.png')}" width="100px" height="100px"/>
<textarea class="captionText"placeholder="your default text">please display some text</textarea>
</a>
</div>
My CSS is as follows:
#folderlist {
font-size: 0;
width: 1500px;
margin: 20px auto;
position: absolute;
top: 21%;
right: 8.1%;
text-align: center;
}
#folderlist a {
margin: 15px;
border: 8px solid transparent;
display: inline-block;
opacity: .8;
color:black;
}
#folderlist a:hover {
opacity: 1;
border-color: red;
}
.captionText {
display: block;
position: relative;
width: 100px;
height: 20px;
text-color:black;
border: 2px solid red;
}
I have tried different variations by removing placeholder using an input area and even just using <p> tags.
Any help would be much appreciated.
I have tried also the following:
<a style='text-decoration: none; color: orange;'>
<img src="${resource(dir: 'images', file: 'folderimg.png')}" width="100px" height="100px">
<div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>
The problem is with
#folderlist {
font-size: 0;
width: 1500px;
margin: 20px auto;
position: absolute;
top: 21%;
right: 8.1%;
text-align: center;
}
Setting the font-size to 0 tends to make text invisible :)
The code is fine. Just do one thing.
Put # in the anchor tag.
<a href="#">
<image src="cool.jpg" width="100px" height="100px"/>
<textarea class="captionText"placeholder="your default text">please display some text</textarea>
</a>
else there is no problem in code
A textarea is a form input. It's not something you use for just displaying text. Use a 'p' tag instead
Joshua Comeau is correct - the markup doesn't make sense.
<a> is an anchor tag. It is only allowed to contain certain things. Form elements, such as <input>, <select>, and <textarea> are not among them.
Textareas are the large text editing areas that you expect in a mail system. You don't use them to display text.
You can just put that text there not wrapped in anything at all. That's probably what you want.
If you just need something to attach style rules to, use a <span>.
If what you're trying to do is to get a rectangular area to put text into, you want a <div> instead.
<textarea> within <a> is not legal, and will never work in a compliant browser.
The code in your "I have also tried" is actually perfectly valid, and what you want to do.
I need to set it with CSS, not jquery.
The selector is for
all labels which do not have a sibling that is a checkbox or radio component.
a sample is:
<span>
<input id="item" type="checkbox">
<label for="item">Data</label>
</span>
This is because i have CSS which sets label to 12px, BUT it affects asp:checkboxes and asp:radio..., but i do not want them to be affected.
There isn't a CSS selector for an element that doesn't have a sibling of a certain kind.
But if you can guarantee that your structure is always an input followed by a label, then you could use the next-sibling combinator with :not() like so to match the label:
input:not([type="checkbox"]):not([type="radio"]) + label
Otherwise you're going to have to add classes to those labels, or use jQuery.
Try adjacent sibling selector:
input[type='text'] + label { // your styles }
You need to apply it to all predecessors you need namely. But there are not many possibilities to use label for besides checkbox and radios you don't want ;)
DEMO
You can select elements based on what kinds of siblings they have, IF the siblings precede your target elements. You can do however much type/selector checking you want on preceding siblings of your target.
You can kind of go backwards using nth-last-of-type and nth-last-child, but you can't do any selector checking on elements which follow your target, and the only kind of type checking you can do on following elements is counting how many there are of the same type.
So in your case you could use:
label {
/* your styling here */
}
input[type="checkbox"] + label, input[type="radio"] + label {
/* remove the styling for labels preceded by a checkbox or radio button */
}
Use ~ instead of + if you expect other elements between your inputs and labels.
Depending on what other elements might be inside the spans that you're working with, any of the 'nth' pseudoclasses may be useful to you.
This would also work for your example, if all you care about is that the labels don't have a preceding sibling:
label:first-child {
/* awesome styles */
}
I submitted an answer to a question that I feel is extremely valuable and along the lines to what you're asking for in this question. Here is the permalink to that question/answer.
https://stackoverflow.com/a/43132408/6167697
The key thing that is missing that may not work for your case is I propose keeping the inputs a child only to what they need to be so that other content can be selector'd using generic sibling selectors. Hypothetically you could still keep them in the span, and then use the labels in various elements inside the span, and that would still allow you treat those labels separate from any others I would think. I'll copy in a code snippet for a working example that demonstrates label elements that are not siblings to their inputs that can still be styled.
* {
padding: 0;
margin: 0;
background-color: #262626;
color: white;
}
.radio-button {
display: none;
}
#filter {
padding: 5% 0;
display: flex;
justify-content: center;
}
.filter-label {
display: inline-block;
border: 4px solid green;
padding: 10px 20px;
font-size: 1.4em;
text-align: center;
cursor: pointer;
}
main {
clear: left;
}
.content {
padding: 3% 10%;
display: none;
}
h1 {
font-size: 2em;
}
.date {
padding: 5px 30px;
font-style: italic;
}
.filter-label:hover {
background-color: #505050;
}
#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
background-color: green;
}
#featured-radio:checked~main .featured {
display: block;
}
#personal-radio:checked~main .personal {
display: block;
}
#tech-radio:checked~main .tech {
display: block;
}
<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked">
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal">
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech">
<header id="filter">
<label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label>
<label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label>
<label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label>
</header>
<main>
<article class="content featured tech">
<header>
<h1>Cool Stuff</h1>
<h3 class="date">Today</h3>
</header>
<p>
I'm showing cool stuff in this article!
</p>
</article>
<article class="content personal">
<header>
<h1>Not As Cool</h1>
<h3 class="date">Tuesday</h3>
</header>
<p>
This stuff isn't nearly as cool for some reason :(;
</p>
</article>
<article class="content tech">
<header>
<h1>Cool Tech Article</h1>
<h3 class="date">Last Monday</h3>
</header>
<p>
This article has awesome stuff all over it!
</p>
</article>
<article class="content featured personal">
<header>
<h1>Cool Personal Article</h1>
<h3 class="date">Two Fridays Ago</h3>
</header>
<p>
This article talks about how I got a job at a cool startup because I rock!
</p>
</article>
</main>
That has the added benefit of being pure CSS too! And as per the other post, here's the JSFIDDLE so you can play around with it yourselves.
I am trying to do a toggle in pure CSS using :focus pseudo-selector.
My problem is I try to do the focus on parent element and change both child elements and adjacent selector.
<p class="collapser" tabindex="0">FILTERS
<span class="dblArrow right">
<i class="icon icon-double-chevron-right" tabindex="0">>></i>
<i class="icon icon-double-chevron-left" tabindex="0"><<</i>
</span>
</p>
<ul class="filters">.....
On the click on collapser (or the arrows in <i>), I want to display the <ul> or hide it, and changing the arrows.
You can view a demo of what I achieved until now : http://jsfiddle.net/TmzC7/9/
It has drawbacks : when you click anywhere outside the collapser the filters are hidden. To hide the filters, you have to click on the arrows.
If there is a solution so that either the arrows or the whole collapser (better) can handle the toggle and switch arrows, it would be great, but I reckon you have to use JavaScript for this...
I tried to do things like :
.collapser:focus .icon-double-chevron-right:focus + .icon-double-chevron-left {
opacity:1;
text-indent:0;
}
to detect click on the arrows, but it did not work. I assume focus does not bubble.
Is there a trick (like playing on tabindex or something) to achieve this without JavaScript?
using the examples here http://ghinda.net/css-toggle-switches/
i was able to do this http://jsfiddle.net/DbXQs/
it seems like the catch is to use the :checked selector.
hope it helps.
You could use the :target selector, like this :
.icon-double-chevron-right,
.icon-double-chevron-left,
.filters {
padding: 10px;
margin: 0;
list-style: none;
display:block;
border: 1px solid #000;
}
.filters,
.icon-double-chevron-left,
.icon-double-chevron-right:target {
display: none;
}
.icon-double-chevron-right:target + .icon-double-chevron-left,
.icon-double-chevron-right:target ~ .filters {
display:block;
}
a {
color: #333;
text-decoration: none;
}
<div>
>>
<<
<ul id="drop" class="filters">
<li>
FILTER 1
</li>
<li>
FILTER 2
</li>
</ul>
</div>
(see also this Fiddle)
I use anchor as my site navigation.
<div id='nav'>
<a href='#abouts'>
<div class='navitem about'>
about
</div>
</a>
<a href='#workss'>
<div class='navitem works'>
works
</div>
</a>
</div>
The CSS
#nav {
margin-left: 50px;
margin-top: 50px;
text-transform: uppercase;
}
.navitem {
background: #333;
color: white;
width: 230px;
height: 50px;
font-size: 25px;
line-height: 50px;
padding-left: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-top: 10px;
}
.about:hover {
background: #cc00ff;
}
.about:active {
background: #ff00ff;
color: #000;
width: 250px;
}
.works:hover {
background: #0066FF;
}
.works:active {
background: #0099cc;
color: #000;
width: 250px;
}
I'm wondering how to keep the div element style keep in the :active state once after the click until I hit another nav bar item, so how to do it?
Combine JS & CSS :
button{
/* 1st state */
}
button:hover{
/* hover state */
}
button:active{
/* click state */
}
button.active{
/* after click state */
}
jQuery('button').click(function(){
jQuery(this).toggleClass('active');
});
The :target-pseudo selector is made for these type of situations: http://reference.sitepoint.com/css/pseudoclass-target
It is supported by all modern browsers. To get some IE versions to understand it you can use something like Selectivizr
Here is a tab example with :target-pseudo selector.
I FIGURED IT OUT. SIMPLE, EFFECTIVE NO jQUERY
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
To make button change content:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
Hope it helps!!
You can use a little bit of Javascript to add and remove CSS classes of your navitems. For starters, create a CSS class that you're going to apply to the active element, name it ie: ".activeItem". Then, put a javascript function to each of your navigation buttons' onclick event which is going to add "activeItem" class to the one activated, and remove from the others...
It should look something like this: (untested!)
/*In your stylesheet*/
.activeItem{
background-color:#999; /*make some difference for the active item here */
}
/*In your javascript*/
var prevItem = null;
function activateItem(t){
if(prevItem != null){
prevItem.className = prevItem.className.replace(/{\b}?activeItem/, "");
}
t.className += " activeItem";
prevItem = t;
}
<!-- And then your markup -->
<div id='nav'>
<a href='#abouts' onClick="activateItem(this)">
<div class='navitem about'>
about
</div>
</a>
<a href='#workss' onClick="activateItem(this)">
<div class='navitem works'>
works
</div>
</a>
</div>
If you want to keep your links to look like they are :active class, you should define :visited class same as :active so if you have a links in .example then you do something like this:
a.example:active, a.example:visited {
/* Put your active state style code here */ }
The Link visited Pseudo Class is used to select visited links as says the name.