Accordian Section

This bootstrap css example is contributed by istiakahmedchowdhury10, on 22-Jul-2026. Component is made with bootstrap css v.4.6. It is responsive. similar terms for this example is Masonry

Tags: Gallery

Author istiakahmedchowdhury10

v.4.6

Fork Fullscreen

<div class="col-md-8 offset-md-2 text-center">
    <h1 class="display-3 fw-bold text-white mb-3 tracking-tight">
      <span class="text-primary">accordion Section</span>
    </h1>
  </div>

<div class="accordion accordion-flush" id="accordionFlushExample">
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingOne">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
          What is the purpose of this exam?
        </button>
      </h2>
      <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
        data-bs-parent="#accordionFlushExample">
        <div class="accordion-body">
          Like other assessment tasks, examinations can be used to measure student learning and the effectiveness of the
          learning process. So, we must ensure that the skills examined during the examination are constructively
          aligned with the skills required by the subject learning outcomes. To do this, look at the action verbs in the
          subject learning outcomes. For example, students may need to be able to explain key principles or make
          recommendations around a particular problem. These action verbs are key to designing an exam that produces
          evidence of students demonstrating those skills and abilities.

Another aspect that could be considered is whether the exam is an assessment of learning, for learning, or as
          learning. The timing of an exam may dictate the type of exam; for example, a mid-session exam may focus on an
          assessment of learning, while the end-of-session exam is an assessment of learning.

So the above is all about identifying what you require at the end of the assessment, what you want students to
          learn or show. Then you can ‘plan backwards’ to design the exam you need and obtain the evidence from the exam
          that you require.
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingTwo">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
          What type of response is required?
        </button>
      </h2>
      <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
        data-bs-parent="#accordionFlushExample">
        <div class="accordion-body">
          A fixed response can be explained as an objective response in which students select the correct response to a
          question or supply a word or short phrase to answer a question or complete a statement. This can be done in
          multiple-choice, true-false, matching, or fill-in-the-blank questions.

A constructed response is a subjective narrative that challenges students to create an original answer.
          Examples include short answer, long answer, essay, multimodal responses, reflections, or performance test
          items.
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingThree">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
          Have you chosen the best test format for evaluating cognitive ability to meet the learning outcomes?
        </button>
      </h2>
      <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
        data-bs-parent="#accordionFlushExample">
        <div class="accordion-body">
          The verbs in the learning outcome can provide direction towards the choice of the question type. Some verbs
          such as identify, list, and select clearly indicate that students need to select the response. If the question
          is written in such a way that a student has to reason in order to select a correct response, student actions
          such as analyse or compare could be included in the selection of answers. Generally, verbs such as analyse,
          apply, interpret, compare, infer and predict indicate that a student should construct a response.
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingFore">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#flush-collapseFore" aria-expanded="false" aria-controls="flush-collapseFore">
            Does the exam cover what is required?
          </button>
        </h2>
        <div id="flush-collapseFore" class="accordion-collapse collapse" aria-labelledby="flush-headingFore"
          data-bs-parent="#accordionFlushExample">
          <div class="accordion-body">
            You may want to map the questions against the subject learning outcomes, knowledge level, degree of
            difficulty, format, etc to understand the outcomes' coverage and whether the right level of challenge has
            been achieved.
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="flush-headingFive">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">
              What exam format should I use?
            </button>
          </h2>
          <div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive"
            data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">
              There are many different exam formats. Some examples are:

Automatically Marked exams - including multiple choice, fill in the blank and matching question types.
              Short answer exams.
              Essay exams.
              Problem or case-based/scenario exams.
              Oral exams where students may be interviewed and need to justify their answers or demonstrate their
              clinical reasoning..
            </div>
          </div>
        </div>
      </div>

More Examples