CSS treeview

Platform: CSS

Published Apr 05, 2012

Updated Apr 06, 2012

this is an example of how to make a treeview without the use of javascript.

image files located here - Example

example html:

		Code 			
<section id="treeview">
		<article>First Item</article>
		<article>
			<input type="checkbox" class="treeview" id="item2" /><label for="item2">Second Item</label>
			<article>Child one</article>
			<article>Child two</article>
			<article>
				<input type="checkbox" class="treeview" id="nested1" checked /><label for="nested1">Nested Parent 1</label>
				<article>Nested Item 1</article>
			</article>
		</article>
		<article>
			<input type="checkbox" class="treeview" id="item3" disabled /><label for="item3">This treeview</label>
			<article>is disabled</article>
		</article>
	</section>	

note: the ID attribute for the input/label pairs must be identical and unique

adding a checked attribute to the input element will make it expand by default and the disabled attribute will disable toggling for that list

#treeview article * { padding-left: 10px; }

#treeview article *:not(:nth-child(2)) { margin-left: 10px; }

.treeview { display: none; }

.treeview:checked + label { background: URL("plus.png") left center no-repeat; }

.treeview:not(:checked) ~ label { background: URL("minus.png") left center no-repeat; }

.treeview:checked ~ *:not(:nth-child(2)) { display: none; }

.treeview:disabled ~ * { color: #707070; }

Comments

nanobio9 - May 17, 2012

Hi, this is great. I have not put it into practical use yet but I wish to ask a trivial question before I do. You used treeview as the id instead of the class of section. Does it mean that there can be only one treeview in one page? What if we change it into a class instead? Thanks.

Respond

Hawkee - Apr 07, 2012

@gooshie You should try Chrome. I recently switched and really like it. The problem with IE8 is that it doesn't support CSS fully and has a lot of quirks. IE9 has much better support and will generally make the internet look nicer. Many webmasters are using the newer styling techniques that only IE9, Firefox, Safari and Chrome support. For example the buttons here on Hawkee won't appear rounded on IE8 as they should.

I couldn't duplicate the issue you described with the arrow key, but if it's only an IE8 issue it probably isn't worth addressing as only 6% of our users are still on IE8.

Anyway, good story.

Respond

gooshie - Apr 07, 2012

Hawkee,
Yes, I'm on IE8 mainly because IE9 bites the big one.
I also have FF11 installed but on windows IE is my 'goto'
I wish FF would handle search engines and favorites like
IE does. Strike that last comment before a holy war erupts... again...
Yes, you did get it fixed for IE8 and it looks great! I'm worried tho
how it will be when someone post 1,000 lines of code and the first
many lines are longer than the window and we have to scroll.
OIC, I can just click on the line and [key=>] over to it.
BTW, that one shows like lots of extra space after the longest
line that could make you feel like there is a long line hiding somewhere.
Don't mean to be overly picky but while we got you on this and it's
fresh in your mind best to give you feed back now I hope..

Note: I was fixing a gals computer and during the conversation she asked
me if i was on facebook and I replied, "no, I'm on Hawee.com which is like
facebook for computer nerds... instead of posting pictures of getting drunk
and writing goofy crap about snooky and the situation we post screenshots
of programs and code we create on our computers and write tutorials on
how to use and modify the code." I do not understand why but then she asked
me if I was seeing anyone to which I replied enthusiastically, "Not when I take
my medication!" I never did figure out why she had such an interrest in my
hallucinations.

Respond

Hawkee - Apr 07, 2012

@sunslayer I found a hack for IE8 that fixes the max-height problem, so I was able to get the max-height back in there for people with more modern browsers.

Respond

sunslayer - Apr 06, 2012

I'm not sure about what gooshie meant but for me i preferred having a max height so when you had a snippet that was very long you wouldn't have to scroll that far to get to the comments section

Respond

Hawkee - Apr 06, 2012

@gooshie I ended up removing the max-height parameter and that fixed the problem with IE8 showing so much empty space. I may add it back in a later time once more people have moved away from IE8.

Respond

Hawkee - Apr 06, 2012

@gooshie Are you on IE8? This particular version has an ugly issue with the max-height CSS property which I'm trying to address. What you describe is how it works in both Firefox and Chrome. Have a look in one of those and let me know if it is correct.

Respond

sunslayer - Apr 06, 2012

^ agreed about the height of the main snippet section

Respond

gooshie - Apr 06, 2012

sunslayer,
Nice! Thanks, I am needing some type menus about now.

Hawkee,
I like the new code blocks and hope you are thinking how to set the height/length
based on number of lines so you dont have a verticle scroll and not so much empty
space. A line or two more than needed would be nice up to like maybe one hundred
lines of code at which point you get the verticle scroll bar. Or much better would be
that the maximum size is about same as browser height as its tough to have to scroll
both ways if the code block is too much larger than available space. That part of the
original design was not really bad before. I do however like the addition of multiple
blocks exactly for code like what sunslayer posted here. Also of course the line numbers
are GREAT idea and will make referencing code sections easier. Syntax highlighting for
a seemingly infinite number of languages.... good luck with that... wouldnt want to be you..
LOL

Respond

sunslayer - Apr 06, 2012

that would be great

Respond

Hawkee - Apr 06, 2012

@sunslayer Very good. I'm considering offering an iframe for demos such as this. Jsfiddle has a very easy way to embed a demo.

Respond

sunslayer - Apr 06, 2012

added.

Respond

Hawkee - Apr 05, 2012

Very nice. Also, I suggest for your demo to try jsfiddle.net. It's a really useful Javascript/CSS demo tool.

Respond

sunslayer - Apr 05, 2012

Quote

images located here

lol :)

Respond

Hawkee - Apr 05, 2012

I noticed you have some png files in there. Might be good to mention that.

Respond

Aha2Y - Apr 05, 2012

I love it, Thanks!

Respond