Skip to main content

Accordion & Tabs

Accordion & Tabs

How to Use the Component

This versatile component allows you to present detailed information in a clean, interactive format that enhances page readability. By collapsing content until requested, it keeps your pages streamlined and easy to navigate for every visitor.

Common ways to use this component include:

A blurry image of a bright yellow, diamond-shaped object against a dark background.FAQs: Group frequently asked questions into collapsible panels for quick scanning.

A blurry image of a bright yellow, diamond-shaped object.Announcements: Present timely updates or news alerts without taking up permanent screen space.

A blurry, close-up image of a solid yellow shape on a dark background.Quotes: Showcase testimonials or highlight key quotes in a compact, organized block.

A blurry, close-up image of a vibrant yellow diamond shape against a dark background.Organizing Large Content Pages: Break up long-form text, policies, or multi-step processes into manageable sections.

Color Customiz­ation

Tailor the component's visual style to match your brand identity by selecting neutral tones, predefined brand colors, or a fully custom color palette.

Multi-Column Layouts

Choose between one-, two-, or three-column arrangements for accordion sections to best fit your page layout and visual hierarchy.

Integrated Component Body

Add a rich content editor alongside your accordion menu—positioned on either the left or right side—to display context, images, or supplementary text.

Unified Display Mode

Switch easily between vertical accordion panels and horizontal tabs within the exact same component setup depending on your design preferences.

Examples

Custom Color, 1 Column

This is an example of the ‘Custom Color’ color scheme and ‘One Column’ layout.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sapien vitae orci laoreet, non ornare metus rutrum. Fusce lacus velit, ullamcorper vitae enim ac, pharetra ullamcorper magna. Nunc molestie consectetur nulla. Nulla molestie at nisl vel imperdiet. Nullam auctor euismod mi, vitae finibus orci dapibus ut. Mauris tristique odio at malesuada varius.

    Etiam sem velit, malesuada quis libero a, mattis dignissim odio. Praesent scelerisque tincidunt ultrices. Fusce eget sem nisl. Sed rutrum diam nec lacus eleifend, eu facilisis sapien elementum. Maecenas dui est, bibendum eu quam quis, mattis ultricies augue. Phasellus eleifend finibus neque, et semper elit dapibus vitae. Sed ut placerat diam, eget bibendum velit. Nunc et luctus quam. Mauris vel pharetra massa, non gravida elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sapien vitae orci laoreet, non ornare metus rutrum. Fusce lacus velit, ullamcorper vitae enim ac, pharetra ullamcorper magna. Nunc molestie consectetur nulla. Nulla molestie at nisl vel imperdiet. Nullam auctor euismod mi, vitae finibus orci dapibus ut. Mauris tristique odio at malesuada varius.

    Etiam sem velit, malesuada quis libero a, mattis dignissim odio. Praesent scelerisque tincidunt ultrices. Fusce eget sem nisl. Sed rutrum diam nec lacus eleifend, eu facilisis sapien elementum. Maecenas dui est, bibendum eu quam quis, mattis ultricies augue. Phasellus eleifend finibus neque, et semper elit dapibus vitae. Sed ut placerat diam, eget bibendum velit. Nunc et luctus quam. Mauris vel pharetra massa, non gravida elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sapien vitae orci laoreet, non ornare metus rutrum. Fusce lacus velit, ullamcorper vitae enim ac, pharetra ullamcorper magna. Nunc molestie consectetur nulla. Nulla molestie at nisl vel imperdiet. Nullam auctor euismod mi, vitae finibus orci dapibus ut. Mauris tristique odio at malesuada varius.

    Etiam sem velit, malesuada quis libero a, mattis dignissim odio. Praesent scelerisque tincidunt ultrices. Fusce eget sem nisl. Sed rutrum diam nec lacus eleifend, eu facilisis sapien elementum. Maecenas dui est, bibendum eu quam quis, mattis ultricies augue. Phasellus eleifend finibus neque, et semper elit dapibus vitae. Sed ut placerat diam, eget bibendum velit. Nunc et luctus quam. Mauris vel pharetra massa, non gravida elit.

Color, 2 Column

This is an example of the ‘Color’ color scheme and ‘Two Column’ layout.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sapien vitae orci laoreet, non ornare metus rutrum. Fusce lacus velit, ullamcorper vitae enim ac, pharetra ullamcorper magna. Nunc molestie consectetur nulla. Nulla molestie at nisl vel imperdiet. Nullam auctor euismod mi, vitae finibus orci dapibus ut.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sapien vitae orci laoreet, non ornare metus rutrum. Fusce lacus velit, ullamcorper vitae enim ac, pharetra ullamcorper magna. Nunc molestie consectetur nulla. Nulla molestie at nisl vel imperdiet. Nullam auctor euismod mi, vitae finibus orci dapibus ut.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sapien vitae orci laoreet, non ornare metus rutrum. Fusce lacus velit, ullamcorper vitae enim ac, pharetra ullamcorper magna. Nunc molestie consectetur nulla. Nulla molestie at nisl vel imperdiet. Nullam auctor euismod mi, vitae finibus orci dapibus ut.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sapien vitae orci laoreet, non ornare metus rutrum. Fusce lacus velit, ullamcorper vitae enim ac, pharetra ullamcorper magna. Nunc molestie consectetur nulla. Nulla molestie at nisl vel imperdiet. Nullam auctor euismod mi, vitae finibus orci dapibus ut.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sapien vitae orci laoreet, non ornare metus rutrum. Fusce lacus velit, ullamcorper vitae enim ac, pharetra ullamcorper magna. Nunc molestie consectetur nulla. Nulla molestie at nisl vel imperdiet. Nullam auctor euismod mi, vitae finibus orci dapibus ut.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sapien vitae orci laoreet, non ornare metus rutrum. Fusce lacus velit, ullamcorper vitae enim ac, pharetra ullamcorper magna. Nunc molestie consectetur nulla. Nulla molestie at nisl vel imperdiet. Nullam auctor euismod mi, vitae finibus orci dapibus ut.

Neutral, 3 Column

This is an example of the ‘Neutral’ color scheme and ‘Three Column’ layout.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sapien vitae orci laoreet, non ornare metus rutrum. Fusce lacus velit, ullamcorper vitae enim ac, pharetra ullamcorper magna. Nunc molestie consectetur nulla. Nulla molestie at nisl vel imperdiet. Nullam auctor euismod mi, vitae finibus orci dapibus ut.

  • Contact Mrs. Buche for meeting information and any applicable fees.  

    colored pencilsThe main purpose of an art club is to create art! Students may work on individual or group projects, exploring a variety of mediums such as painting, drawing, sculpture, or digital art. Sometimes we collaborate on large-scale murals or other community art projects. This can provide a sense of accomplishment and pride in creating something that others can enjoy. We also encourage students to enter local or national art contests, giving students a chance to showcase their skills and potentially win recognition or prizes. We also have at least one field trip per year to visit a local museum. This exposes students to different styles of art and inspire them in their own work. 

  • Please contact Mr. Stephenson for meeting information.

    students working on their robots​​​​​​​Robotics club can be a fun and engaging activity that challenges students to develop important skills while exploring the exciting world of technology and engineering. Students are challenged to solve complex problems by designing and building robots. This can be a fun and rewarding activity that encourages creativity and innovation.

  • closeup of football on a tee​​​​​​​Purpose: Opportunity for students to have fun and be active before the start of the
    school day
    Grades: 6-8 (check calendar for designated days for each grade level)
    Sponsor: Coach Davis
    Meetings: Year-long, Monday-Thursday – before school

  • closeup of fanned book pages​​​​​​​Purpose: The purpose of the book club is to foster community through a shared love of
    reading and books. The club aims to promote reading at JMS.
    Grades: 6-8
    Sponsor: Mrs. Brock and Ms. Velchoff
    Meetings: Short-term; Wednesdays – after school- $10 for notebook, sticky notes,
    colored pens

  • closeup of one chess piece knocking over another one​​​​​​​Purpose: To have fun learning and playing the game of chess while fostering higher level critical thinking and use of strategy.
    Grades: 6-8
    Sponsor: Mr. Moore
    Meetings: Year-long; Thursdays – before school

Color, Component Body on Left

This is an example of the ‘Color’ color scheme, and ‘Component Body on Left’ layout.

About ParentSquare

Our district uses ParentSquare for school communication, primarily with email, text and app notifications. ParentSquare automatically syncs with PowerSchool to generate an account for each parent, using their preferred email address and phone number. We encourage parents to access their accounts so they can download the mobile app and update their preferences on when and how they are notified.

ParentSquare is a safe, secure, and modern approach to communication and collaboration between school and home.
 

Learn More about ParentSquare

  • On the app, enter your email or cell phone number. The email and/or cell phone number should match what is in the school's information system (PowerSchool) or database.

    On the web, click ‘Sign In’, then under ‘Register’ section, put your email or phone number and click '“Go”.

    If the email or phone number is not recognized by ParentSquare, parents can follow directions to request access or call the school office and ask them to update the contact information.

  • ParentSquare allows users to customize their notifications based on notification type and select their preferred delivery method for each school. The Instant setting will send all post notifications in real-time. The Digest setting sends direct messages, alerts, and time-sensitive posts instantly, but sends all non-time sensitive posts at the end of the day, reducing the number of notifications you receive daily. (We recommend the Digest setting.) Learn more about notification settings.

  • Yes. All parents have a ParentSquare account. ParentSquare is the primary tool for district and school communication. Individuals who do not activate their account in ParentSquare will still receive an email digest at the end of each day that communication is sent out to them. In the event of emergencies, phone calls will be sent as well.

  • Parents can update their language preference for their account. Once they have done this, ParentSquare will automatically translate any communication to them in their selected language. This translation will also occur when the parent sends a message to a staff member. Learn more about ParentSquare translations and how to set the language preference.

Neutral, Component Body on Right

This is an example of the ‘Neutral’ color scheme, and ‘Component Body on Right’ layout.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sapien vitae orci laoreet, non ornare metus rutrum. Fusce lacus velit, ullamcorper vitae enim ac, pharetra ullamcorper magna. Nunc molestie consectetur nulla. Nulla molestie at nisl vel imperdiet. Nullam auctor euismod mi, vitae finibus orci dapibus ut.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sapien vitae orci laoreet, non ornare metus rutrum. Fusce lacus velit, ullamcorper vitae enim ac, pharetra ullamcorper magna. Nunc molestie consectetur nulla. Nulla molestie at nisl vel imperdiet. Nullam auctor euismod mi, vitae finibus orci dapibus ut.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sapien vitae orci laoreet, non ornare metus rutrum. Fusce lacus velit, ullamcorper vitae enim ac, pharetra ullamcorper magna. Nunc molestie consectetur nulla. Nulla molestie at nisl vel imperdiet. Nullam auctor euismod mi, vitae finibus orci dapibus ut.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sapien vitae orci laoreet, non ornare metus rutrum. Fusce lacus velit, ullamcorper vitae enim ac, pharetra ullamcorper magna. Nunc molestie consectetur nulla. Nulla molestie at nisl vel imperdiet. Nullam auctor euismod mi, vitae finibus orci dapibus ut.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sapien vitae orci laoreet, non ornare metus rutrum. Fusce lacus velit, ullamcorper vitae enim ac, pharetra ullamcorper magna. Nunc molestie consectetur nulla. Nulla molestie at nisl vel imperdiet. Nullam auctor euismod mi, vitae finibus orci dapibus ut.

A young girl smiles as she works on a laptop with her teacher in a classroom.

Tabs

This is an example of the ‘Tabs’ Display Style. This style works best with a smaller number of records or when record titles are relatively short. Alignment options for ‘Tabs’ include ‘Left’ and ‘Center.’

A teacher passionately engages with students in a classroom setting.If you love the idea of making a difference for children but need a flexible schedule, this is an ideal way to give back and get rewarded in so many ways.

Apply Today!

A chef in a kitchen uses scissors to cut fresh lettuce for a salad.As part of the Nutrition Services team, you'll love the camaraderie of your team and gratitude of the students.

Apply Today!

Two teachers discuss lesson plans in a classroom.You will partner with teachers and work directly with students as a crucial member of the education team. There's nothing more rewarding than that.

Apply Today!

A woman with curly hair smiles while driving a bus.You'll have the power to brighten each child's morning with a friendly hello and a smooth ride to school.

Apply Today!

Three women sit at a table, smiling and working on a craft project with yarn and needles.A calling like yours to teach and assist students with disabilities is a tremendous gift — to kids and to our communities.

Apply Today!

  • A teacher passionately engages with students in a classroom setting.If you love the idea of making a difference for children but need a flexible schedule, this is an ideal way to give back and get rewarded in so many ways.

    Apply Today!

  • A chef in a kitchen uses scissors to cut fresh lettuce for a salad.As part of the Nutrition Services team, you'll love the camaraderie of your team and gratitude of the students.

    Apply Today!

  • Two teachers discuss lesson plans in a classroom.You will partner with teachers and work directly with students as a crucial member of the education team. There's nothing more rewarding than that.

    Apply Today!

  • A woman with curly hair smiles while driving a bus.You'll have the power to brighten each child's morning with a friendly hello and a smooth ride to school.

    Apply Today!

  • Three women sit at a table, smiling and working on a craft project with yarn and needles.A calling like yours to teach and assist students with disabilities is a tremendous gift — to kids and to our communities.

    Apply Today!