html FAQ ordered list

Question

I'm creating a website that has a FAQ page, and i was wondering if i could make an "ordered" list but instead of displaying

question ....
a) answer .....
question
a) answer
etc. which would be done using:

<ol>
  <li>question</li>
      <ol type="A">
        <li>answer</li>
      </ol>
  <li>question 2</li>
      <ol type="A">
        <li>answer 2</li>
        <ol>
</ol>

But is there a way to turn the numbers (and letters) into Question and Answer? or do i have to manually have to type Question and Answer for each line? I have used JavaScript (and css) before but never Jquery. I would prefer to do it with JavaScript.

EDIT: I was unaware of dd and dt (description list) when I asked this question. Originally i was trying to make one line say Question and then Answer on the next line, but the answer @Timothy Jones said made more sense then making an ordered list.

you can make it with server side or client side programming language. but, you need a database to store your QAs instead of 'hardcoding' the QAs. — Oki Erie Rinaldi, Sep 08 '15 at 02:18
There isn't doing to be a "submit question" which i check and answer as it is only a simple class exercise. — Michael, Sep 08 '15 at 02:21
Something along these lines?.. http://jsfiddle.net/wxocofu6/ — Michael Benjamin, Sep 08 '15 at 02:22

Timothy Jones · Accepted Answer · 2015-09-08T07:55:33.480

5

I would do this using a description list, and the CSS ::before selector:

<style type="text/css">
   dt::before {
       content: "Question: ";
   } 
   dd::before {
       content: "Answer: ";
   }
</style>
<dl>
  <dt>How would this look?</dt>
      <dd>it would look alright</dd>
  <dt>Alright, well how would this look?</dt>
      <dd>it would also look alright</dd>
</dl>

(add styles as appropriate). I prefer this over a javascript solution, as it doesn't require any processing after the page has loaded.

edited Sep 08 '15 at 07:55

answered Sep 08 '15 at 02:22

Timothy Jones

21,495
6
60
90

Perfect, that is what i was attempting to get! – Michael Sep 08 '15 at 02:24

Michael Benjamin · Answer 2 · 2015-09-19T17:21:54.257

1

HTML

<ol class="faq">
    <li>
        <ol><li></li></ol>
    </li>
    <li>
        <ol><li></li></ol>
    </li>
    <li>
        <ol><li></li></ol>
    </li>
    <li>
        <ol><li></li></ol>
    </li>
</ol>

CSS

ol { list-style-type: none; }

ol.faq  { padding-left: 0; }

ol.faq > li::before {
    content: "Question";
    color: red;
}

ol.faq > li > ol > li::before {
    content: "Answer";
    color: green;
}

DEMO: http://jsfiddle.net/wxocofu6/5/

Note that in your code your lists are improperly nested.

edited Sep 19 '15 at 17:21

answered Sep 08 '15 at 02:26

Michael Benjamin

346,931
104
581
701

About your note, this is how i was taught and it allows me to understand it easier. I'm trying to get into better habits, but how should it have been done? – Michael Sep 08 '15 at 02:30
If you're nesting a list within a list item, you don't close the list item until after the code for the nested items. In other words, consider `
` and `

Michael Benjamin

Sep 08 '15 at 02:34

score 0 · Answer 3 · answered Sep 08 '15 at 02:24

0

One way would be to set the icon style to none, and then using before in CSS, set the text.

.questions li { list-style-type: none; font-weight: bold; color: black; } 
.questions li:before { content: "Question"; padding-right: 5px; color: red; }
.answer li { list-style-type: none; font-weight: bold; color: black; } 
.answer li:before { content: "Answer"; padding-right: 5px; color: red; }

<ol class="questions">
  <li>Do you do the thing?</li>
      <ol class="answer">
        <li>Yes, we do.</li>
      </ol>
  <li>How do you do the thing?</li>
      <ol class="answer">
        <li>With lots of magic!</li>
        <ol>
</ol>

answered Sep 08 '15 at 02:24

Keeghan McGarry

355
3
15

This is what i was original trying to do, but Timothy Jones bet you by a couple seconds, and his answer looks easier. – Michael Sep 08 '15 at 02:27
guess I should of left it un-styled! drat! Ah well, his is definitely a little simpler and cleaner. – Keeghan McGarry Sep 08 '15 at 04:01

html FAQ ordered list

3 Answers3