SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <OL> sub-sections and within an accordion

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Here's an example taken from this article.

    Code:
    <!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. #3
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pretty cool!
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by pyxxel View Post
    Pretty cool!
    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.
    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. #5
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by pyxxel View Post

    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?:
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •