{"id":1955,"date":"2019-07-25T20:40:27","date_gmt":"2019-07-25T20:40:27","guid":{"rendered":"https:\/\/wptest.sdelling.w3.uvm.edu\/?page_id=1955"},"modified":"2020-09-18T12:37:10","modified_gmt":"2020-09-18T16:37:10","slug":"accordions","status":"publish","type":"page","link":"https:\/\/blog.uvm.edu\/manual\/accordions\/","title":{"rendered":"Accordions"},"content":{"rendered":"\n
<\/div>\n\n\n\n

At present, WordPress does not natively offer accordion functionality. We have chosen to use the Atomic Blocks (AB) Accordion block for this purpose.<\/p>\n\n\n\n

To add an accordion to your page:<\/strong> While you are on the page you wish to edit, click on the little [+] icon at the top left of your page. Type “accodrion” in the Block search field to filter all blocks by “accordion”. Select the “AB Accordion” block or the “Accordion__Two columns, title-accordion” if you want an accordion that takes up less of the page in a 2-column layout. The component will load into your page. If you chose the “Reusable” “Accordion__Two column… ” block, just click on the block you just loaded. The name of the block will show up over a light gray band above the block. Click on the three vertical dots […] and select “convert to regular block.” You are now ready to edit the quote placeholder text with your text. <\/p>\n\n\n\n

If you chose the Atomic Blocks “AB Accordion”, just follow the prompts within the empty block to enter your text content. Your accordion will automatically be made. The title area just takes text input, but you can add text, images, video, tables, lists, and other content in the body of the accordion. <\/p>\n\n\n\n

Repeat the steps above for each accordion row you wish to add.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n


Reusable Block Name:<\/strong> AB Accordion<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n
<\/div>\n\n\n\n

“Accordion” is a component consisting of an “Accordion Title” and the accordion content. You stack them according to your content needs.<\/p>\n\n\n\n

<\/div>\n\n\n\n
This is an accordion title<\/summary>
\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas purus viverra accumsan in. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Orci dapibus ultrices in iaculis nunc sed augue lacus. Accumsan sit amet nulla facilisi morbi tempus iaculis. Enim eu turpis egestas pretium. Mauris a diam maecenas sed enim ut sem viverra. Morbi leo urna molestie at elementum eu facilisis sed odio. Risus feugiat in ante metus dictum at. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Porttitor eget dolor morbi non arcu. Tempus imperdiet nulla malesuada pellentesque elit eget. Morbi tincidunt augue interdum velit euismod. Posuere ac ut consequat semper viverra nam libero justo laoreet. Sapien pellentesque habitant morbi tristique senectus. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Sit amet aliquam id diam maecenas ultricies mi eget.<\/p>\n\n\n\n

Orci eu lobortis elementum nibh tellus molestie nunc non blandit. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Aliquet lectus proin nibh nisl. Tortor dignissim convallis aenean et tortor at risus viverra adipiscing. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Egestas erat imperdiet sed euismod nisi porta lorem mollis. Curabitur vitae nunc sed velit dignissim sodales ut eu sem. Quis auctor elit sed vulputate mi sit amet mauris commodo. Sed tempus urna et pharetra pharetra. Vel pretium lectus quam id leo in vitae. Sed viverra ipsum nunc aliquet bibendum. Cursus mattis molestie a iaculis at erat pellentesque. Vel turpis nunc eget lorem. Elit at imperdiet dui accumsan sit amet nulla. Nunc lobortis mattis aliquam faucibus purus in massa. Sed augue lacus viverra vitae congue eu.<\/p>\n<\/div><\/details><\/div>\n\n\n\n

This is another accordion title<\/summary>
\n

The content included in an accordion can be text, lists, text with images, tables etc.<\/p>\n\n\n\n

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <\/li>
  • Egestas purus viverra accumsan in. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. <\/li>
  • Orci dapibus ultrices in iaculis nunc sed augue lacus. Accumsan sit amet nulla facilisi morbi tempus iaculis. <\/li>
  • Enim eu turpis egestas pretium. Mauris a diam maecenas sed enim ut sem viverra. <\/li>
  • Morbi leo urna molestie at elementum eu facilisis sed odio. Risus feugiat in ante metus dictum at. <\/li>
  • Etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Porttitor eget dolor morbi non arcu. <\/li>
  • Tempus imperdiet nulla malesuada pellentesque elit eget. Morbi tincidunt augue interdum velit euismod. Posuere ac ut consequat semper viverra nam libero justo laoreet. Sapien pellentesque habitant morbi tristique senectus. <\/li>
  • Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Sit amet aliquam id diam maecenas ultricies mi eget.<\/li><\/ul>\n<\/div><\/details><\/div>\n\n\n\n
    This is an accordion title made with AB Accordions<\/summary>
    \n

    This is an ordered list.<\/p>\n\n\n\n

    1. Orci eu lobortis elementum nibh tellus molestie nunc non blandit. <\/li>
    2. Lectus magna fringilla urna porttitor rhoncus dolor purus non. <\/li>
    3. Aliquet lectus proin nibh nisl. Tortor dignissim convallis aenean et tortor at risus viverra adipiscing. <\/li>
    4. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. <\/li>
    5. Egestas erat imperdiet sed euismod nisi porta lorem mollis. <\/li>
    6. Curabitur vitae nunc sed velit dignissim sodales ut eu sem. <\/li>
    7. Quis auctor elit sed vulputate mi sit amet mauris commodo. <\/li>
    8. Sed tempus urna et pharetra pharetra. Vel pretium lectus quam id leo in vitae. <\/li>
    9. Sed viverra ipsum nunc aliquet bibendum. Cursus mattis molestie a iaculis at erat pellentesque. <\/li>
    10. Vel turpis nunc eget lorem. Elit at imperdiet dui accumsan sit amet nulla. <\/li>
    11. Nunc lobortis mattis aliquam faucibus purus in massa. Sed augue lacus viverra vitae congue eu.<\/li><\/ol>\n<\/div><\/details><\/div>\n\n\n\n
      This accordion has a table in it<\/summary>
      \n
      <\/div>\n\n\n\n
       <\/th>Vermont Resident<\/th>Out-of-State Resident<\/th><\/tr><\/thead>
      Tuition<\/td>$16,392<\/td>$41,280<\/td><\/tr>
      Comprehensive Fee<\/td>$2,410<\/td>$2,410<\/td><\/tr>
      Average Housing & Meals — View all Housing & Meal Rates<\/a><\/td>$12,946<\/td>$12,946<\/td><\/tr>
      \n Estimated Billable Costs<\/strong>\n <\/td>\n $31,748<\/strong>\n <\/td>\n $56,636<\/strong>\n <\/td><\/tr>
      Estimated Books & Supplies*<\/td>$1,200<\/td>$1,200<\/td><\/tr>
      Estimated Personal\/Misc. Expenses*<\/td>$2,272<\/td>$2,632<\/td><\/tr>
      \n Total Cost of Attendance<\/strong>\n <\/td>\n $35,220<\/strong>\n <\/td>\n $60,468<\/strong>\n <\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div><\/details><\/div>\n\n\n\n
      <\/div>\n\n\n\n

      Two column layout with a title and an accordion<\/h3>\n\n\n\n
      <\/div>\n\n\n\n


      Block Name:<\/strong> Accordion__ Two columns, title-accordion<\/p>\n\n\n\n

      \"\"<\/figure><\/div>\n\n\n\n

      We have made a two-column layout with an accordion that has a shorter line length. It’s available via the “Layouts” area at the top of the page while in edit mode.<\/p>\n\n\n\n

      <\/div>\n\n\n\n
      \n
      \n

      Headline<\/h4>\n<\/div><\/div>\n\n\n\n
      \n
      Accordion headline<\/summary>
      \n

      this is<\/p>\n\n\n\n

      <\/p>\n<\/div><\/details><\/div>\n\n\n\n

      Another Accordion title<\/summary>
      \n

      accordion content<\/p>\n\n\n\n

      <\/p>\n<\/div><\/details><\/div>\n\n\n\n

      We are loving these accordion titles<\/summary>
      \n

      Accordions are really useful when you have a lot of depth to your content and want to provide some organization to it. <\/p>\n<\/div><\/details><\/div>\n\n\n\n

      Accordion title this is just placeholder text<\/summary>
      \n

      You wouldn’t use accordions though if there wasn’t a lot of content within each accordion. That amount of content could be in a list or just subheads and text. <\/p>\n<\/div><\/details><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n

      <\/div>\n\n\n\n

      See how the accordion block was used to list publications on a research page. <\/h3>\n\n\n\n
      <\/div>\n\n\n\n
      \n