Expanding Hidden Content

I am making a website, and on the front page is a list of books:



I want for the user to click the Book1 box, for example, and have a previously hidden chapters list fold downward, so that after the click the page appears like this:


Is this doable with only html and css? What html elements would I use? Lists, like a navigation menu? And what would the css look like?
It’s most important to answer what html element should I use, as I will be structuring the page first and styling it later.


I think you’re looking for this:

Demo: http://media02.hongkiat.com/css-based-accordion/demo/index.html#vertservices

Just get rid of the styles or keep them and it will achieve what you have asked for.

Hope it helps.


@[B][COLOR=#0071d8]Tapan[/COLOR][/B] ;
Yes, I think that that was what I was looking for.

Now I have a new problem, when I right-click in Explorer, “create new txt file” isn’t an option…
Probably from installing Notepad++

Thanks for that link

Why do you want to do that? There’s prolly a better option.

I want to do that so I can create a new txt file in whichever folder I’m in quickly. I don’t know of any faster way. Do you?

btw by “explorer” I mean “windows explorer,” not “internet explorer”. Don’t know if that was clear.

O, I see (I did think you meant IE!). Because I have my simple .txt program set up to do code, I also had a similar problem (although on a Mac). I just created a blank .txt file that always sits on my desktop, and when I want a new one, I just Option/click to duplicate it and drag it where I want. Very simple.

Well, I did actually solve my problem after making that post. I had to edit some registry values to do it.

Incidentally, the reason I needed to make .txt files was to then turn them into .html or .css files (more types later I’m sure), but in fact the registry edits I made to make .txt available again I then used to make “new .html document” available from the right-click menu as well. So, now I can just right-click in whichever folder I want to create an html file in, and make it on the spot! CSS as well.

For the record, Tapan, I ended up using the guide and it works beautifully. I styled it in a much different way, of course, and I was able to achieve exactly what I had visualized before making this thread (well, almost exactly – Mac Firefox renders it a bit weird…).


Are you using a proper doctype ?