Tabs and Accordions

Tabbed navigation and accordion panels both rely on managing which section of content is currently visible to the user. In Alpine.js, you handle this by tracking the active state in your component's data and rendering content conditionally with directives like x-show.

For tabs, you define a state variable such as activeTab in your x-data object. Each tab button updates this variable with x-on:click, and you use x-bind:class to highlight the active tab visually. The tab panels themselves are displayed or hidden based on whether their identifier matches the current activeTab value using x-show.

Accordions use a similar approach. You maintain a variable like openPanel in your x-data, which stores the index or name of the currently open panel. Clicking an accordion header updates this variable, and each panel's content uses x-show to display only when its index matches openPanel. This pattern ensures only one section is open at a time, creating a dynamic and interactive UI experience.