An accordion list for expandable content.

This accordion content.

<div class="c-accordion__item js-accordion__item">
  <button aria-controls="accordion-1a" class="c-accordion__title">This accordion title<i class="c-accordion__icon c-icon c-icon--plus c-icon--after"></i></button>
  <div class="c-accordion__content" id="accordion-1a">
    <p>This accordion content.</p>
  </div>
</div>

And the accordion itself is made up of an array of accordion-items:

Academic transcripts

If you've completed your studies

You need to provide copies of your degree certificates and formal transcripts of your academic record. This should include full details of the degrees, classes, grades you've obtained and the modules/units you have taken.

Documents not in English must be accompanied by a formally certified translation into English.

If you've not yet finished your studies

If you're still registered for your current course, or your undergraduate or postgraduate results are still pending, please provide an interim transcript of your results to date.

Any offer you're made will be conditional and subject to completion of the course concerned at a specified level.

Academic references

  • For taught Masters courses (MSc, MA, PG Dip, PG Cert and MRes) you need to provide one reference.
  • For research degrees (PhD, MPhil and MA/MSc by research) you need to provide two references.

This is an important part of the selection process, so it's in your interest to make sure that your referees are both appropriate and informative. You should provide an academic reference if you have graduated within the last five years. Your referees will be contacted automatically by email and asked to provide a reference for you.

If you do not provide an email address for a referee you must ask them to send us references directly and provide them with a copy of our Guidance for academic references (PDF, 36kb).

Written work

Some courses require a sample of your written work to further demonstrate your suitability. If you're required to submit written work, the details of what is required will be in the application form. To help you prepare see courses with written work requirements.

Personal statement

A personal statement can be included as part of your application. For some courses it forms a part of the assessment process. Details of what to include in your personal statement will be provided during the application process. To help you prepare see course-specific requirements for personal statements.

Curriculum vitae / resume

Your curriculum vitae (CV) or resume can be uploaded as part of your application to provide further information on your prior experience and qualifications.

Evidence of financial support

In most cases, you're not required to submit evidence of funding. A small number of courses require evidence, for example a bank statement or sponsor's letter. Where applicable you'll be asked to submit this as part of your application.

The expectation is that you'll make satisfactory arrangements before entry for your financial support, both for tuition fees and living expenses, for the whole period of your proposed course at the University.

Research proposal or outline of academic interests

If you're applying to a research degree, you should provide an outline of your proposed research topic. You must indicate whether you're interested in the work of a particular member of academic staff. Details of what to include in your research proposal will be provided during the application process. To help you prepare see our guidance for research proposals.

<div class="c-accordion">
  <div class="c-accordion__item js-accordion__item">
    <button aria-controls="test/accordion-2a" class="c-accordion__title">Mandatory for all applicants<i class="c-accordion__icon c-icon c-icon--plus c-icon--after"></i></button>
    <div class="c-accordion__content" id="test/accordion-2a">
      <h3>Academic transcripts</h3>
      <h4>If you've completed your studies</h4>
      <p>You need to provide copies of your degree certificates and formal transcripts of your academic record. This should include full details of the degrees, classes, grades you've obtained and the modules/units you have taken.</p>
      <p>Documents not in English must be accompanied by a formally certified translation into English.</p>
      <h4>If you've not yet finished your studies</h4>
      <p>If you're still registered for your current course, or your undergraduate or postgraduate results are still pending, please provide an interim transcript of your results to date.</p>
      <p>Any offer you're made will be conditional and subject to completion of the course concerned at a specified level.</p>
      <h3>Academic references</h3>
      <ul>
        <li>For <strong>taught Masters courses</strong> (MSc, MA, PG Dip, PG Cert and MRes) you need to provide one reference.</li>
        <li>For <strong>research degrees</strong> (PhD, MPhil and MA/MSc by research) you need to provide two references.</li>
      </ul>
      <p>This is an important part of the selection process, so it's in your interest to make sure that your referees are both appropriate and informative. You should provide an academic reference if you have graduated within the last five years. Your referees will be contacted automatically by email and asked to provide a reference for you.</p>
      <p>If you do not provide an email address for a referee you must ask them to send us references directly and provide them with a copy of our <a title="Guidance for Academic references (opens in a new window)" href="/media/study/documents/postgraduate/Guidance for references.pdf">Guidance for academic references (PDF, 36kb)</a>.</p>
    </div>
  </div>

  <div class="c-accordion__item js-accordion__item">
    <button aria-controls="accordion-2b" class="c-accordion__title">Course-specific requirements<i class="c-accordion__icon c-icon c-icon--plus c-icon--after"></i></button>
    <div class="c-accordion__content" id="accordion-2b">
      <h3>Written work</h3>
      <p>Some courses require a sample of your written work to further demonstrate your suitability. If you're required to submit written work, the details of what is required will be in the application form. To help you prepare see <a href="/study/postgraduate/apply/supporting-documents/written-work/">courses with written work requirements</a>.</p>
      <h3>Personal statement</h3>
      <p>A personal statement can be included as part of your application. For some courses it forms a part of the assessment process. Details of what to include in your personal statement will be provided during the application process. To help you prepare see <a href="/study/postgraduate/apply/supporting-documents/personal-statement-guidance/">course-specific requirements for personal statements</a>.</p>
      <h3>Curriculum vitae / resume</h3>
      <p>Your curriculum vitae (CV) or resume can be uploaded as part of your application to provide further information on your prior experience and qualifications.</p>
      <h3>Evidence of financial support</h3>
      <p>In most cases, you're not required to submit evidence of funding. A small number of courses require evidence, for example a bank statement or sponsor's letter. Where applicable you'll be asked to submit this as part of your application.</p>
      <p>The expectation is that you'll make satisfactory arrangements before entry for your financial support, both for <a href="/study/postgraduate/fees-funding/">tuition fees</a> and <a href="/study/postgraduate/fees-funding/living-costs/">living expenses</a>, for the whole period of your proposed course at the University.</p>
    </div>
  </div>

  <div class="c-accordion__item js-accordion__item">
    <button aria-controls="accordion-2c" class="c-accordion__title">Research applicants: additional documents<i class="c-accordion__icon c-icon c-icon--plus c-icon--after"></i></button>
    <div class="c-accordion__content" id="accordion-2c">
      <h3>Research proposal or outline of academic interests</h3>
      <p>If you're applying to a research degree, you should provide an outline of your proposed research topic. You must indicate whether you're interested in the work of a particular member of academic staff. Details of what to include in your research proposal will be provided during the application process. To help you prepare see our <a href="/study/postgraduate/apply/supporting-documents/research-proposal-guidance/">guidance for research proposals</a>.</p>
    </div>
  </div>

</div>

By default, the accordion will allow you to open as many as you like. Passing "collapse": true as an option will stop that behaviour and only allow one item to be open. If you want this behaviour you must contain them within a .c-accordion block.

Academic transcripts

If you've completed your studies

You need to provide copies of your degree certificates and formal transcripts of your academic record. This should include full details of the degrees, classes, grades you've obtained and the modules/units you have taken.

Documents not in English must be accompanied by a formally certified translation into English.

If you've not yet finished your studies

If you're still registered for your current course, or your undergraduate or postgraduate results are still pending, please provide an interim transcript of your results to date.

Any offer you're made will be conditional and subject to completion of the course concerned at a specified level.

Academic references

  • For taught Masters courses (MSc, MA, PG Dip, PG Cert and MRes) you need to provide one reference.
  • For research degrees (PhD, MPhil and MA/MSc by research) you need to provide two references.

This is an important part of the selection process, so it's in your interest to make sure that your referees are both appropriate and informative. You should provide an academic reference if you have graduated within the last five years. Your referees will be contacted automatically by email and asked to provide a reference for you.

If you do not provide an email address for a referee you must ask them to send us references directly and provide them with a copy of our Guidance for academic references (PDF, 36kb).

Written work

Some courses require a sample of your written work to further demonstrate your suitability. If you're required to submit written work, the details of what is required will be in the application form. To help you prepare see courses with written work requirements.

Personal statement

A personal statement can be included as part of your application. For some courses it forms a part of the assessment process. Details of what to include in your personal statement will be provided during the application process. To help you prepare see course-specific requirements for personal statements.

Curriculum vitae / resume

Your curriculum vitae (CV) or resume can be uploaded as part of your application to provide further information on your prior experience and qualifications.

Evidence of financial support

In most cases, you're not required to submit evidence of funding. A small number of courses require evidence, for example a bank statement or sponsor's letter. Where applicable you'll be asked to submit this as part of your application.

The expectation is that you'll make satisfactory arrangements before entry for your financial support, both for tuition fees and living expenses, for the whole period of your proposed course at the University.

Research proposal or outline of academic interests

If you're applying to a research degree, you should provide an outline of your proposed research topic. You must indicate whether you're interested in the work of a particular member of academic staff. Details of what to include in your research proposal will be provided during the application process. To help you prepare see our guidance for research proposals.

<div class="c-accordion c-accordion--collapse">
  <div class="c-accordion__item js-accordion__item">
    <button aria-controls="accordion-3a" class="c-accordion__title">Mandatory for all applicants<i class="c-accordion__icon c-icon c-icon--plus c-icon--after"></i></button>
    <div class="c-accordion__content" id="accordion-3a">
      <h3>Academic transcripts</h3>
      <h4>If you've completed your studies</h4>
      <p>You need to provide copies of your degree certificates and formal transcripts of your academic record. This should include full details of the degrees, classes, grades you've obtained and the modules/units you have taken.</p>
      <p>Documents not in English must be accompanied by a formally certified translation into English.</p>
      <h4>If you've not yet finished your studies</h4>
      <p>If you're still registered for your current course, or your undergraduate or postgraduate results are still pending, please provide an interim transcript of your results to date.</p>
      <p>Any offer you're made will be conditional and subject to completion of the course concerned at a specified level.</p>
      <h3>Academic references</h3>
      <ul>
        <li>For <strong>taught Masters courses</strong> (MSc, MA, PG Dip, PG Cert and MRes) you need to provide one reference.</li>
        <li>For <strong>research degrees</strong> (PhD, MPhil and MA/MSc by research) you need to provide two references.</li>
      </ul>
      <p>This is an important part of the selection process, so it's in your interest to make sure that your referees are both appropriate and informative. You should provide an academic reference if you have graduated within the last five years. Your referees will be contacted automatically by email and asked to provide a reference for you.</p>
      <p>If you do not provide an email address for a referee you must ask them to send us references directly and provide them with a copy of our <a title="Guidance for Academic references (opens in a new window)" href="/media/study/documents/postgraduate/Guidance for references.pdf">Guidance for academic references (PDF, 36kb)</a>.</p>
    </div>
  </div>

  <div class="c-accordion__item js-accordion__item">
    <button aria-controls="accordion-3b" class="c-accordion__title">Course-specific requirements<i class="c-accordion__icon c-icon c-icon--plus c-icon--after"></i></button>
    <div class="c-accordion__content" id="accordion-3b">
      <h3>Written work</h3>
      <p>Some courses require a sample of your written work to further demonstrate your suitability. If you're required to submit written work, the details of what is required will be in the application form. To help you prepare see <a href="/study/postgraduate/apply/supporting-documents/written-work/">courses with written work requirements</a>.</p>
      <h3>Personal statement</h3>
      <p>A personal statement can be included as part of your application. For some courses it forms a part of the assessment process. Details of what to include in your personal statement will be provided during the application process. To help you prepare see <a href="/study/postgraduate/apply/supporting-documents/personal-statement-guidance/">course-specific requirements for personal statements</a>.</p>
      <h3>Curriculum vitae / resume</h3>
      <p>Your curriculum vitae (CV) or resume can be uploaded as part of your application to provide further information on your prior experience and qualifications.</p>
      <h3>Evidence of financial support</h3>
      <p>In most cases, you're not required to submit evidence of funding. A small number of courses require evidence, for example a bank statement or sponsor's letter. Where applicable you'll be asked to submit this as part of your application.</p>
      <p>The expectation is that you'll make satisfactory arrangements before entry for your financial support, both for <a href="/study/postgraduate/fees-funding/">tuition fees</a> and <a href="/study/postgraduate/fees-funding/living-costs/">living expenses</a>, for the whole period of your proposed course at the University.</p>
    </div>
  </div>

  <div class="c-accordion__item js-accordion__item">
    <button aria-controls="accordion-3c" class="c-accordion__title">Research applicants: additional documents<i class="c-accordion__icon c-icon c-icon--plus c-icon--after"></i></button>
    <div class="c-accordion__content" id="accordion-3c">
      <h3>Research proposal or outline of academic interests</h3>
      <p>If you're applying to a research degree, you should provide an outline of your proposed research topic. You must indicate whether you're interested in the work of a particular member of academic staff. Details of what to include in your research proposal will be provided during the application process. To help you prepare see our <a href="/study/postgraduate/apply/supporting-documents/research-proposal-guidance/">guidance for research proposals</a>.</p>
    </div>
  </div>

</div>

If an accordion content has an ID, then a cookie will be set to remember the state of the accordion, so revisiting the page in the same session will keep the same accordions open.

Edge cases

content.updated event

When there's a YouTube embed inside an accordion, the YouTube embed module fires the content.updated event after it's loaded, which triggers the accordion to reset its height.

This event is also fired by the searchables module, the clearing tables module, the tabs module and also by the load event on any images within an accordion.

The function to reset the accordion height is also triggered by the font.loaded event.

Watch the video here

Programme Home/EU Overseas
Green Chemistry & Sustainable Industrial Technology (PG Diploma) £4,830 £14,390
Safety Critical Systems Engineering (MSc) £17,420 £19,500

Mathematical Finance (MSc)

The fees for the MSc in Mathematical Finance (Online) vary, please refer to the Online/Distance tab.

 £18,060 £23,490
Postgraduate Diploma in Women's Studies (Social Research) £4,830 £11,360

Founded on principles of excellence

Founded on principles of excellence, equality and opportunity for all, the University of York opened in 1963 with just 230 students.

Since then we have become one of the world's leading universities, carving out a reputation as an academic powerhouse where a clear focus on excellence has secured national and international recognition alongside longer established institutions.

A member of the elite Russell Group of universities

We are a dynamic, research-intensive university committed to the development of life-saving discoveries and new technologies to tackle some of the most pressing global challenges.

There are now over 30 academic departments and research centres and the student body has expanded to nearly 16,000.

Vision for a 21st-century campus

The University is in the middle of an unprecedented period of expansion and renewal. Since 2000, we have invested in 20 new buildings on the original Heslington West campus and have completed the first and second phases of a £750m campus expansion at Heslington East.

Our investment in new colleges, teaching and learning space, laboratories, research facilities and a new sport village mean it has never been a better time to join our student body or research groups at York.

Throttle the bandwidth in Chrome Dev Tools in order to make these images load slowly.

<div class="c-accordion">
  <div class="c-accordion__item js-accordion__item">
    <button aria-controls="accordion-4a" class="c-accordion__title">YouTube video embed<i class="c-accordion__icon c-icon c-icon--plus c-icon--after"></i></button>
    <div class="c-accordion__content" id="accordion-4a">
      <p><a class="youtube-video-embed" href="https://www.youtube.com/watch?v=s67Nb0wpcbE">Watch the video here</a></p>
    </div>
  </div>

  <div class="c-accordion__item js-accordion__item">
    <button aria-controls="accordion-4b" class="c-accordion__title">Searchable<i class="c-accordion__icon c-icon c-icon--plus c-icon--after"></i></button>
    <div class="c-accordion__content" id="accordion-4b">
      <div class="js-searchable" data-label="Enter your search term here">
        <table>
          <thead>
            <tr>
              <th>Programme</th>
              <th>Home/EU</th>
              <th>Overseas</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><a href="http://www.york.ac.uk/chemistry/postgraduate/taught/">Green Chemistry &amp; Sustainable Industrial Technology (PG Diploma)</a></td>
              <td>&pound;4,830</td>
              <td>&pound;14,390</td>
            </tr>
            <tr>
              <td><a href="http://www.cs.york.ac.uk/postgraduate/taught-courses/msc-scse/">Safety Critical Systems Engineering</a> (MSc)</td>
              <td>&pound;17,420</td>
              <td>&pound;19,500</td>
            </tr>
            <tr>
              <td>
                <p><a href="http://maths.york.ac.uk/www/MscfinMscmathfin">Mathematical Finance</a> (MSc)</p>
                <p>The fees for the MSc in Mathematical Finance (Online) vary, please refer to the Online/Distance tab.</p>
              </td>
              <td>&pound;18,060</td>
              <td>&pound;23,490</td>
            </tr>
            <tr>
              <td><a href="http://www.york.ac.uk/inst/cws/prospective/dip.htm">Postgraduate Diploma in Women&#39;s Studies (Social Research)</a></td>
              <td>&pound;4,830</td>
              <td>&pound;11,360</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="c-accordion__item js-accordion__item">
    <button aria-controls="accordion-4c" class="c-accordion__title">Clearing tables<i class="c-accordion__icon c-icon c-icon--plus c-icon--after"></i></button>
    <div class="c-accordion__content" id="accordion-4c">
      <div class="js-clearing-table" data-department="Management" data-type="UK/EU"></div>
    </div>
  </div>

  <div class="c-accordion__item js-accordion__item">
    <button aria-controls="accordion-4d" class="c-accordion__title">Tabs<i class="c-accordion__icon c-icon c-icon--plus c-icon--after"></i></button>
    <div class="c-accordion__content" id="accordion-4d">
      <div class="c-tabs c-tabs--horizontal js-tabs">
        <ul class="c-tabs__nav">
          <li class="c-tabs__tab is-active"><a class="c-tabs__link" href="#about">About the university</a></li>
          <li class="c-tabs__tab"><a class="c-tabs__link" href="#excellence">Academic excellence</a></li>
          <li class="c-tabs__tab"><a class="c-tabs__link" href="#investing">Investing in our campus</a></li>
        </ul>
        <div class="c-tabs__container">
          <div class="c-tabs__content is-active" id="about">
            <h3>Founded on principles of excellence</h3>
            <p>Founded on principles of excellence, equality and opportunity for all, the University of York opened in 1963 with just 230 students.</p>
            <p>Since then we have become one of the world's leading universities, carving out a reputation as an academic powerhouse where a clear focus on excellence has secured national and international recognition alongside longer established institutions.</p>
          </div>
          <div class="c-tabs__content" id="excellence">
            <h3>A member of the elite Russell Group of universities</h3>
            <p>We are a dynamic, research-intensive university committed to the development of life-saving discoveries and new technologies to tackle some of the most pressing global challenges.</p>
            <p>There are now over 30 academic departments and research centres and the student body has expanded to nearly 16,000.</p>
            <ul>
              <li><a href="#">Research at York</a></li>
              <li><a href="#">Studying at York</a></li>
              <li><a href="#">Mission and strategies: the University Plan 2009-19</a></li>
            </ul>
          </div>
          <div class="c-tabs__content" id="investing">
            <h3>Vision for a 21st-century campus</h3>
            <p>The University is in the middle of an unprecedented period of expansion and renewal. Since 2000, we have invested in 20 new buildings on the original Heslington West campus and have completed the first and second phases of a £750m campus expansion at Heslington East.</p>
            <p>Our investment in new colleges, teaching and learning space, laboratories, research facilities and a new sport village mean it has never been a better time to join our student body or research groups at York.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="c-accordion__item js-accordion__item">
    <button aria-controls="accordion-4e" class="c-accordion__title">Images<i class="c-accordion__icon c-icon c-icon--plus c-icon--after"></i></button>
    <div class="c-accordion__content" id="accordion-4e">
      <p>Throttle the bandwidth in Chrome Dev Tools in order to make these images load slowly.</p>
      <p><img src="../media/massive-image.jpg" alt="" />
      <p><img src="https://picsum.photos/100/100/?image=200" alt="" /> <img src="https://picsum.photos/100/100/?image=201" alt="" /> <img src="https://picsum.photos/100/100/?image=202" alt="" /> <img src="https://picsum.photos/100/100/?image=203" alt="" /> <img src="https://picsum.photos/100/100/?image=204" alt="" /> <img src="https://picsum.photos/100/100/?image=206" alt="" /> <img src="https://picsum.photos/100/100/?image=208" alt="" /> <img src="https://picsum.photos/100/100/?image=209" alt="" /> <img src="https://picsum.photos/100/100/?image=210" alt="" /> <img src="https://picsum.photos/100/100/?image=211" alt="" /> <img src="https://picsum.photos/100/100/?image=212" alt="" /> <img src="https://picsum.photos/100/100/?image=213" alt="" /> <img src="https://picsum.photos/100/100/?image=214" alt="" /> <img src="https://picsum.photos/100/100/?image=215" alt="" /> <img src="https://picsum.photos/100/100/?image=216" alt="" /> <img src="https://picsum.photos/100/100/?image=217" alt="" /> <img src="https://picsum.photos/100/100/?image=218" alt="" /> <img src="https://picsum.photos/100/100/?image=219" alt="" /> <img src="https://picsum.photos/100/100/?image=220" alt="" /> <img src="https://picsum.photos/100/100/?image=221" alt="" /> <img src="https://picsum.photos/100/100/?image=222" alt="" /> <img src="https://picsum.photos/100/100/?image=223" alt="" /> <img src="https://picsum.photos/100/100/?image=225" alt="" /> <img src="https://picsum.photos/100/100/?image=227" alt="" /> <img src="https://picsum.photos/100/100/?image=228" alt="" /> <img src="https://picsum.photos/100/100/?image=229" alt="" /> </p>
    </div>
  </div>

</div>

Options

Atoms

  • accordion-item
    • title: string or HTML to go in the accordion title (required)
    • content: string or HTML to go in the accordion body (required)
    • collapse: default false. Set to true to allow accordions to be open at once.

Molecules

  • accordion
    • atoms: an array of accordion-item atoms