ACCORDION: Collapsible content panels with toggle headers
VARIANTS: Default | Flush | With Icons
MODES: Multi-open (default) | Exclusive (single-open)
SIZES: Small | Default | Large

Use accordions to organise content into expandable sections — ideal for FAQs, filter panels, settings, and multi-step forms. Each item can be toggled independently, or set to exclusive mode where opening one closes the others. Requires Stimulus controller.

Default Accordion

Default: Bordered wrapper with rounded corners. Multiple items can be open at the same time. Click any header to toggle its content. The active header gets a primary tint and the chevron rotates.

Navigate to the Applications section from the sidebar, click "New Application", fill in the required fields across each step of the form, and click "Submit" on the final step. You will receive a confirmation email once the application has been successfully submitted.
Yes, applications can be edited until the admissions deadline. Go to your submitted application, click "Edit", make your changes, and re-submit. Note that certain fields may be locked after review has begun.

The following documents are typically required:

  • Birth certificate or passport
  • Most recent school report
  • Proof of address (utility bill or council tax statement)
  • Passport-sized photograph
  • Any supporting documents (e.g., EHCP, medical reports)
<div class="tw-accordion" data-controller="accordion"><div class="tw-accordion-item">...</div></div>

Exclusive Mode

Exclusive: Only one item can be open at a time. Opening a new item automatically closes the previously open one. Set with data-accordion-exclusive-value="true".

Applications open on 1 September and close on 15 January. Offers are sent out by 1 March. Accepted offers must be confirmed by 31 March. Late applications may be considered if places remain available.
The entrance exam takes place in November. It consists of English comprehension (45 minutes), Mathematics (45 minutes), and Verbal reasoning (30 minutes). Results contribute 40% to the overall admissions score.
Shortlisted candidates are invited for an interview in December. Each interview lasts approximately 20 minutes and covers the student's interests, motivations for joining, and general knowledge. Parents may also be invited for a brief conversation with the Head of Admissions.
<div class="tw-accordion" data-controller="accordion" data-accordion-exclusive-value="true">...</div>

Flush Variant

Flush: Add .accordion-flush to remove the outer border and rounded corners. Ideal for embedding inside cards or other bordered containers where the accordion should sit flush against the edges.

Admissions Policy

Applicants must be of the correct age for the year group they are applying to. There are no catchment area restrictions, though priority may be given to siblings of current students and children of staff members.
Tuition fees are reviewed annually. A non-refundable registration fee of £150 is required with the application. A deposit of one term's fees is payable upon acceptance of a place to secure enrolment.
Means-tested bursaries covering up to 100% of fees are available. Academic, music, sport, and art scholarships are awarded based on performance in entrance assessments. Scholarship applications must be submitted alongside the main application form.
<div class="tw-accordion tw-accordion-flush">...</div>

With Icons

Icons: Add a leading icon using .accordion-header-icon before the header text. Icons help users quickly identify each section's topic.

Enter the applicant's full name, date of birth, nationality, and contact information. All fields marked with an asterisk are required.
Provide details of previous and current schools attended, including dates, year groups, and any academic achievements or awards received.
Upload the required supporting documents: birth certificate, school report, proof of address, and passport photo. Files must be in PDF, JPG, or PNG format and no larger than 5 MB each.
<button class="tw-accordion-header"><span class="tw-accordion-header-icon"><i class="fa-regular fa-user"></i></span><span>Title</span><i class="fa-solid fa-chevron-down tw-accordion-chevron"></i></button>

Initially Open & Disabled

States: Add .active to .accordion-item and .show to .accordion-collapse for items that start expanded. Add .disabled to .accordion-item to prevent toggling — the controller sets the native disabled attribute and aria-disabled automatically.

Registration has been completed. Your reference number is APP-2026-04521. You can proceed to the next step.
Fill in the applicant's personal details including name, date of birth, address, and emergency contacts.
This step will become available after completing Step 2.
This step will become available after completing all previous steps.
<div class="tw-accordion-item tw-active">...<div class="tw-accordion-collapse tw-show">...</div></div>
<div class="tw-accordion-item tw-disabled">...</div>

Size Variants

Sizes: Add .accordion-sm or .accordion-lg to the .accordion wrapper to adjust padding and font sizes across all items.

Small

Select one or more year groups to filter the applicant list. Available: Year 7, Year 8, Year 9, Year 10, Year 12.
Show applications by status: Submitted, Under Review, Offered, Accepted, Declined, Waitlisted.

Large

Founded in 1875, our school has a long tradition of academic excellence and pastoral care. We welcome students from diverse backgrounds and are committed to providing a supportive environment where every child can thrive.
Our admissions process is designed to be straightforward and transparent. We assess each applicant holistically, considering academic ability, character, and potential contribution to the school community.
<div class="tw-accordion tw-accordion-sm">...</div>
<div class="tw-accordion tw-accordion-lg">...</div>

Keyboard & Accessibility

Accessibility: Accordion headers are native <button> elements with aria-expanded and aria-controls attributes. Panels have role="region" and aria-labelledby linking back to their header. Tab navigates between headers, Enter/Space toggles the focused item. Disabled items receive the native disabled attribute and aria-disabled="true".

Tab to the headers below, press Enter or Space to toggle:

  • Tab — Move focus between accordion headers
  • Enter / Space — Toggle the focused item
  • Shift + Tab — Move focus backwards
  • aria-expanded — Reflects open/closed state on each header
  • aria-controls — Links each header to its panel by ID
  • role="region" — Marks panels as navigable landmark regions
  • aria-labelledby — Links each panel back to its header
  • aria-disabled — Marks locked items as non-interactive