Challenge: Reuse Data Objects with

This challenge will test your knowledge on how to create a reusable AlpineJS component.

We'll cover the following

Challenge yourself

Convert the following component to a reusable AlpineJS component using Name the component collapsible and maintain all elements, properties, and methods.

<div x-data="{
  open: true, 
  get isOpen() { return },
  toggle() { = !;
  <h4 @click="toggle">Toggle</h4>
  <p x-show="isOpen">
    I am collapsible

Note: Put the reusable component definition into the “JavaScript” tab.

Get hands-on with 1200+ tech skills courses.