Perhaps you're referring to another accordion element—there are thousands out there with many beautiful designs. But what if you could create any accordion uniquely and easily without writing a single line of code? Sounds amazing, right? Well, with Oxygen Builder, you can customize this element 100%!
Additionally, you can personalize other features with ease. For example, the element named Accordions (.x-accordions) has several attributes:
data-accordion-multi-collapsable: Defaults to false, which means one accordion opens while another closes. Set it to true to allow multiple accordions to open individually.data-accordion-transition-duration: Controls the opening and closing speed of accordions. The default is 0.3s, but you can set any value ending with s for seconds.data-accordion-center: Defaults to false. If set to true, on large accordions, the screen will center on the accordion you interact with—perfect for lengthy accordion lists.Inside the Accordions, you can add as many elements as you like, each named Accordion (.x-accordion). These come with the data-accordion attribute:
open to keep the accordion open by default.Now, here's the exciting part: By default, the element comes with a head and content structure. However, you can remove these and create your own. You just need to add two div elements inside each Accordion (.x-accordion), one below the other. The first will be the trigger, and the second will be the content.
If you want active and inactive modes, simply add a custom class to any element within these divs. For example, if you add the class custom-class-head to the head, you can also add custom-class-active to define active and inactive states. Similarly, you can apply this to an icon or any other element.
That's it! Enjoy this powerful element and create your own designs with ease.
Oxygen Builder stands out for its ability to generate clean and lightweight code, ensuring websites load quickly and operate efficiently. This not only enhances the user experience but also increases the chances of achieving better search engine rankings. Its focus on performance makes it ideal for projects that require speed and stability.
Oxygen offers unparalleled flexibility, allowing designers and developers to customize every detail of a website’s design. Whether you need a minimalist layout or a visually complex project, Oxygen provides the tools to make it happen without compromising functionality.
If you’re looking to build an online store, Oxygen is an excellent choice. Its integration with WooCommerce allows for custom designs of product pages, carts, and checkouts. It also simplifies online store management with advanced design and optimization tools that ensure both functionality and aesthetics.
Oxygen Builder stands out for its ability to generate clean and lightweight code, ensuring websites load quickly and operate efficiently. This not only enhances the user experience but also increases the chances of achieving better search engine rankings. Its focus on performance makes it ideal for projects that require speed and stability.
Oxygen offers unparalleled flexibility, allowing designers and developers to customize every detail of a website’s design. Whether you need a minimalist layout or a visually complex project, Oxygen provides the tools to make it happen without compromising functionality.
If you’re looking to build an online store, Oxygen is an excellent choice. Its integration with WooCommerce allows for custom designs of product pages, carts, and checkouts. It also simplifies online store management with advanced design and optimization tools that ensure both functionality and aesthetics.