紹介
Liferay Fragments are reusable, customizable web elements that serve as building blocks for a page. They consist of HTML, CSS, and JavaScript to provide structure, style, and functionality to your pages.
This recipe guides you through the basic steps required to create an accordion (collapsable panel) and display it within your Liferay pages using Fragments.
prerequisites
Liferay DXP environment
A user with permissions to edit pages and create/manage Fragments.
At least one site page created in Liferay DXP
steps
On your Liferay DXP instance, open the Site Menu, expand Design, and click Fragments.
Select your desired fragment set or create a new set by clicking Add Fragment Set next to Fragment Sets.
Click New, select Basic Fragment, and click Next.
Enter
Accordion Block
for Name and click Add.This creates a new empty fragment and redirects you to its edit page.
Replace the content of the HTML window with the code snippet below.
This adds two main
div
elements to the fragment: theaccordion-title
and theaccordion-body
for the accordion's heading and text body, respectively.Copy and paste the code snippet below into the JavaScript window.
This adds functionality to the fragment for toggling the
accordion-body
's visibility when clicking theaccordion-title
element.Replace the content of the CSS window with this code snippet to style the fragment and hide the
accordion-body
element:Click Publish.
With this, you can use this fragment while editing your site pages.
Go to your desired site page and start editing it.
From the Fragments and Widgets menu, drag and drop an Accordion Block fragment into your page.
Double-click one of the accordion's fields and edit the text as desired.
Click Publish.
You can only create custom fragments in non-default fragment sets.
You can also map the accordion's fields to corresponding fields in a content item. To do this, double-click on one of its sub-elements (e.g., title-text
), then select the desired content item and field on the configuration side panel.
conclusion
Congratulations! You now know how to create and display a dynamic accordion fragment in your Liferay website.