{"id":1730,"date":"2026-02-16T22:28:10","date_gmt":"2026-02-17T03:28:10","guid":{"rendered":"https:\/\/it.rutgers.edu\/rutgers-it-site-documentation\/?page_id=1730"},"modified":"2026-06-07T15:53:48","modified_gmt":"2026-06-07T20:53:48","slug":"how-to-insert-an-accordion-into-a-knowledge-base-article","status":"publish","type":"page","link":"https:\/\/it.rutgers.edu\/rutgers-it-site-documentation\/how-to-insert-an-accordion-into-a-knowledge-base-article\/","title":{"rendered":"How to insert an accordion into a knowledge base article"},"content":{"rendered":"
\n\n
\n \n
\n
\n
\n
\n\t\t\t\t

How to insert an accordion into a knowledge base article<\/h1>\n\n<\/div>\n\t\t\t\t
<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<\/div>\n\n <\/section>\n\n\n
\n\n
\n
\n \n

The accordion feature in WordPress allows you to create a number of tabs on a page that expand and present more information when clicked. The feature is used in FAQ articles, expanding with the answer to the question in the title tab.<\/p>\n

To use the “accordion” feature in a knowledge base article, you must copy and paste the code.<\/p>\n

    \n
  1. Place [[accordion]<\/strong> at the beginning of the code and [\/accordion]]<\/strong> at the end of the code.<\/li>\n
  2. To add an accordion tab, insert [[accordion-item title=”XXX”]<\/strong>\u00a0with your tab title inside the quotations.<\/li>\n
  3. Add an icon to the tab title by inserting Font Awesome HTML following icon=<\/strong> to the previous code. (Example: [accordion-item title=”This is a title?” icon=”fas fa-books”]<\/strong>).<\/li>\n
  4. To add content in the tab, place text between [accordion-item title=”XXX”]<\/strong> and [\/accordion-item]]<\/strong>.<\/li>\n<\/ol>\n

    Here’s an example of code that generates the accordion below: [[accordion][accordion-item title=”This is a title?” icon=”fas fa-books”]Here is some Content.[\/accordion-item][accordion-item title=”This is another title.”]Here is some more content![\/accordion-item][\/accordion]]<\/strong><\/p>\n

    [accordion][accordion-item title=”This is a title?” icon=”fas fa-books”]Here is some Content.[\/accordion-item]\u00a0[accordion-item title=”This is another title.”]Here is some more content![\/accordion-item][\/accordion]<\/p>\n<\/div>\n\n <\/div>\n