<OL> sub-sections and within an accordion

JavaScript
1

Is it possible to make ordered lists with sub-sections (1.1, 1.2 and 1.1.1, 1.1.2 etc), or should I just write that as part of the header titles?
I’m working on an FAQ page and want do divide up my questions/answers something like this:

1. Question one header

1.1. Answer header to the above
blahlvblah blah blahabablaaaahblah blah
blah blaaahblllaaah.

1.2. More about the same subject
blaaah blah blah blaahblablah blahblah.

1.2.1. even more, but related to section 1.2. above
blablahblah blahblabh balahalabalha balahah blah ablah
balhablahblablablahbalaha blah.

2. Another question here

2.1. answer to that question
blablahblah blahblabh balaha labalha balahah blah ablah
balhablah blablab lahbalaha blah.

2.2. More stuff related to the question
blabla hblah blahblabh balaha labalha balahah blah ablah
bahla ha blah blablab lahbalaha blah.

I see that I also have a thing or two to learn about text layout (paragraphs, headers, font sizes, whitespace etc.). Are there any good sources for that sort of thing online?

In addition I want to place each question along with its answers in an accordion. I found a nice one with a scrolling feature (scrolls the opened section up the page when selected) and the ability to “open all/close all” here).
I’ve tried to clean up the code (my result), but still find it difficult to adapt for a responsive site (most likely due to my limited skills). However, if anyone knows of a similarly functioning accordion with more flexible coding I’m interested in that :slight_smile:

2

Hi,

For IE8+ you can use counters to make nested lists.

Here’s an example taken from this article.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Nested Counters</title>
<style type="text/css" media="all">
ol {
	counter-reset: section;
	list-style-type: none;
}
ol li { counter-increment: section; }
ol li:before { content: counters(section, ".") ". "; }
body {
	font-size: 12px;
	margin: 4em;
	max-width: 45em;
	line-height: 1.3em;
}
h1 {
	font-size: 1.333em;
	line-height: 1.125em;
	margin: 0 0 1.125em 0;
}
</style>
</head>
<body>
<h1>Nested counters</h1>
<ol>
		<li>item 1
				<ol>
						<li>sub item 1
								<ol>
										<li>sub-sub item 1</li>
										<li>sub-sub item 2</li>
										<li>sub-sub item 3</li>
								</ol>
						</li>
						<li>Sub item 2</li>
				</ol>
		</li>
		<li>item 2</li>
</ol>
</body>
</html>

Accordions are usually created by calculating the height of the content so that they can scroll to the correct height to reveal the content. If you had a fluid width then the height would change and the scroll would be very jumpy when scrolling to auto height unless it was specifically coded. I couldn’t see any examples of fluid width/height about.

3

Pretty cool! :slight_smile:
But as the linked article says it won’t work with IE8 and I want my site to work with any browser. I assume I’ll have to enter it in the headers instead then.

After reading your reply about accordions and responsive sites I searched and came across a flexible slide-to-top accordion. Lucky for me it looks very similar to the first one I considered but is missing the “close all/open all” button. Is this possible to implement?
(not sure if it’s a HTML or Javascript question, or I’d ask in the appropriate forum sections).

4

For older browers then yes you will have to do it manually.

After reading your reply about accordions and responsive sites I searched and came across a flexible slide-to-top accordion. Lucky for me it looks very similar to the first one I considered but is missing the “close all/open all” button. Is this possible to implement?
(not sure if it’s a HTML or Javascript question, or I’d ask in the appropriate forum sections).

Yes that looks suitable. To open or close it be default you would just need to cycle through the list elements and add or remove the st-open and reset the heights. This would be a question for the JS forum and I’ll move the thread there now.

5

Does anyone reading know how to alter the code for this?
Considering that the accordion I already found has that function already, would it be easier/possible to adapt that one for responsive use?

Another thing: can a responsive accordion work with a grid layout where I for instance will use several columns for my FAQ answers for desktop viewers with a wide display screen while for mobile users the content in those columns will be stacked on top of each other as in this illustration?:

6

You can’t have one list spreading over several columns unless you use the css3 multi column layout which isn’t widely supported yet. Therefore it is not possible to have three columns compress into one column otherwise. If you did use the multi-column layout then using media queries you could revert it to a single column at smaller screen widths for mobiles etc.