The Accordion allows the user to show and hide sections of related content on a page. There are many ways to use this component, like displaying a list of FAQs, showing various menus and submenus, displaying the locations of a particular company, and more. Below we are presenting an example of the Accordion component that you can use in your Taco project.
Below you can find the code for the Accordion component.
<x-accordion :items="$accordion"></x-accordion>
Below you can find a sample code for the $accordion array.
public $accordion = [
[
'title' => 'As we live, our hearts turn colder',
'text' => 'Cause pain is what we go through as we become older. We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand. We get our heart broken by people we love, even that we give them all we have. Then we lose family over time. What else could rust the heart more over time? Blackgold.',
'isOpen' => true
],
[
'title' => "We’re not always in the position that we want to be at",
'text' => "We're constantly growing. We’re constantly making mistakes. We’re constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game of life you need to appreciate every moment. A lot of people don’t appreciate the moment until it’s passed.",
'isOpen' => false
],
[
'title' => "It really matters and then like it really doesn’t matter",
'text' => "What matters is the people who are sparked by it. And the people who are like offended by it, it doesn’t matter. Because it's about motivating the doers. Because I’m here to follow my dreams and inspire other people to follow their dreams, too.",
'isOpen' => false
]
];