I have a menu and three hidden divs that show up depending on what option the user selects. I would like to show / hide them on click using only CSS. I have it working with jquery right now but I want it to be accessible with js disabled. Somebody here provided this code for someone else but it only works with div:hover or div:active, when I change it to div:visited it doesn't work. Would I need to add something or perhaps this isn't the right way to do it? I appreciate any help :)
The thing is my client wants this particular divs to slide/fade when the menu is selected, but I still want them to display correctly with javascript turned off. Maybe z-index could do the trick...?
This question is related to
css
A little hack-ish but it works. Note that the label tag can be placed any where. The key parts are:
input:checked+div selects the div immediately next to/after the inputfor said checkbox (or hey leave out the label and just have the checkbox)display:none hides stuffCode:
<head>
<style>
#sidebar {height:100%; background:blue; width:200px; clear:none; float:left;}
#content {height:100%; background:green; width:400px; clear:none; float:left;}
label {background:yellow;float:left;}
input{display:none;}
input:checked+#sidebar{display:none;}
</style>
</head>
<body>
<div>
<label for="hider">Hide</label>
<input type="checkbox" id="hider">
<div id="sidebar">foo</div>
<div id="content">hello</div>
</div>
</body>
One could also use css3 elements to create the slide/fade effect. I am not familiar enough with them to be much help with that aspect but they do exist. Browser support is iffy though.
You could combine the above effect with javascript to use fancy transitions and still have a fall back. jquery has a css method to override the above and slide and fade for transitions.
[key="value"] is an attribute selector.To string tabs together one could use:
<html>
<head>
<style>
input[value="1"]:checked ~ div[id="1"]{
display:none;
}
input[value="2"]:checked ~ div[id="2"]{
display:none;
}
</style>
</head>
<body>
<input type="radio" name="hider" value="1">
<input type="radio" name="hider" value="2">
<div id="1">div 1</div>
<div id="2">div 2</div>
</body>
</html>
Although a bit unstandard, a possible solution is to contain the content you want to show/hide inside the <a> so it can be reachable through CSS:
a .hidden {_x000D_
visibility: hidden;_x000D_
}_x000D_
_x000D_
a:visited .hidden {_x000D_
visibility: visible;_x000D_
}<div id="container">_x000D_
<a href="#">_x000D_
A_x000D_
<div class="hidden">hidden content</div>_x000D_
</a>_x000D_
</div>This can be achieved by attaching a "tabindex" to an element. This will make that element "clickable". You can then use :focus to select your hidden div as follows...
.clicker {_x000D_
width:100px;_x000D_
height:100px;_x000D_
background-color:blue;_x000D_
outline:none;_x000D_
cursor:pointer;_x000D_
}_x000D_
_x000D_
.hiddendiv{_x000D_
display:none;_x000D_
height:200px;_x000D_
background-color:green;_x000D_
}_x000D_
_x000D_
.clicker:focus + .hiddendiv{_x000D_
display:block;_x000D_
}<html>_x000D_
<head>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<div>_x000D_
<div class="clicker" tabindex="1">Click me</div>_x000D_
<div class="hiddendiv"></div>_x000D_
</div>_x000D_
_x000D_
</body>_x000D_
_x000D_
</html>The + selector will select the nearest element AFTER the "clicker" div. You can use other selectors but I believe there is no current way to select an element that is not a sibling or child.
Fiddle to your heart's content
HTML
<div>
<a tabindex="1" class="testA">Test A</a> | <a tabindex="2" class="testB">Test B</a>
<div class="hiddendiv" id="testA">1</div>
<div class="hiddendiv" id="testB">2</div>
</div>
CSS
.hiddendiv {display: none; }
.testA:focus ~ #testA {display: block; }
.testB:focus ~ #testB {display: block; }
Benefits
You can put your menu links horizontally = one after the other in HTML code, and then you can put all the content one after another in the HTML code, after the menu.
In other words - other solutions offer an accordion approach where you click a link and the content appears immediately after the link. The next link then appears after that content.
With this approach you don't get the accordion effect. Rather, all links remain in a fixed position and clicking any link simply updates the displayed content. There is also no limitation on content height.
How it works
In your HTML, you first have a DIV. Everything else sits inside this DIV. This is important - it means every element in your solution (in this case, A for links, and DIV for content), is a sibling to every other element.
Secondly, the anchor tags (A) have a tabindex property. This makes them clickable and therefore they can get focus. We need that for the CSS to work. These could equally be DIVs but I like using A for links - and they'll be styled like my other anchors.
Third, each menu item has a unique class name. This is so that in the CSS we can identify each menu item individually.
Fourth, every content item is a DIV, and has the class="hiddendiv". However each each content item has a unique id.
In your CSS, we set all .hiddendiv elements to display:none; - that is, we hide them all.
Secondly, for each menu item we have a line of CSS. This means if you add more menu items (ie. and more hidden content), you will have to update your CSS, yes.
Third, the CSS is saying that when .testA gets focus (.testA:focus) then the corresponding DIV, identified by ID (#testA) should be displayed.
Last, when I just said "the corresponding DIV", the trick here is the tilde character (~) - this selector will select a sibling element, and it does not have to be the very next element, that matches the selector which, in this case, is the unique ID value (#testA).
It is this tilde that makes this solution different than others offered and this lets you simply update some "display panel" with different content, based on clicking one of those links, and you are not as constrained when it comes to where/how you organise your HTML. All you need, though, is to ensure your hidden DIVs are contained within the same parent element as your clickable links.
Season to taste.
You're going to have to either use JS or write a function/method in whatever non-markup language you're using to do this. For instance you could write something that will save the status to a cookie or session variable then check for it on page load. If you want to do it without reloading the page then JS is going to be your only option.
You could do this with the CSS3 :target selector.
menu:hover block {
visibility: visible;
}
block:target {
visibility:hidden;
}
For a CSS-only solution, try using the checkbox hack. Basically, the idea is to use a checkbox and assign different styles based on whether the box is checked or not used the :checked pseudo selector. The checkbox can be hidden, if need be, by attaching it to a label.
link to dabblet (not mine): http://dabblet.com/gist/1506530
link to CSS Tricks article: http://css-tricks.com/the-checkbox-hack/
if 'focus' works for you (i.e. stay visible while element has focus after click) then see this existing SO answer:
You can find <div> by id, look at it's style.display property and toggle it from none to block and vice versa.
function showDiv(Div) {_x000D_
var x = document.getElementById(Div);_x000D_
if(x.style.display=="none") {_x000D_
x.style.display = "block";_x000D_
} else {_x000D_
x.style.display = "none";_x000D_
}_x000D_
}<div id="welcomeDiv" style="display:none;" class="answer_list">WELCOME</div>_x000D_
<input type="button" name="answer" value="Show Div" onclick="showDiv('welcomeDiv')" />HTML
<input type="text" value="CLICK TO SHOW CONTENT">
<div id="content">
and the content will show.
</div>
CSS
#content {
display: none;
}
input[type="text"]{
color: transparent;
text-shadow: 0 0 0 #000;
padding: 6px 12px;
width: 150px;
cursor: pointer;
}
input[type="text"]:focus{
outline: none;
}
input:focus + div#content {
display: block;
}<input type="text" value="CLICK TO SHOW CONTENT">
<div id="content">
and the content will show.
</div>Source: Stackoverflow.com