Building a Reusable and Dynamic Accordion With Fragments

Introduction

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.

Note

You can only create custom fragments in non-default 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: the accordion-title and the accordion-body for the accordion's heading and text body, respectively.

								<li class="align-items-center d-flex flex-column accordion-entry mb-3 w-100 border-top">

  <div class="align-items-center content-area d-flex justify-content-between m-0 py-3 row w-100">

    <p class="col-11 font-weight-bold m-0 text-neutral-10" id="accordion-title" data-lfr-editable-id="title-text" data-lfr-editable-type="text">

      Accordion Title

    </p>

    <div class="col-1 custom-icon px-0" id="plus-icon">

      [@clay["icon"] symbol="plus"/]

    </div>

    <div class="col-1 custom-icon d-none px-0" id="minus-icon">

      [@clay["icon"] symbol="hr"/]

    </div>

  </div>

  <div class="accordion-body col-12 content-area text-neutral-8 w-100" id="accordion-body" data-lfr-editable-id="body-text" data-lfr-editable-type="rich-text">

    Text body for the accordion.

  </div>

</li>

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 the accordion-title element.

								const customIcons = fragmentElement.getElementsByClassName('custom-icon');

const accordionBody = fragmentElement.querySelector('#accordion-body');

const minusIcon = fragmentElement.querySelector('#minus-icon');

const plusIcon = fragmentElement.querySelector('#plus-icon');

const accordionTitle = fragmentElement.querySelector('#accordion-title');

accordionTitle.onclick = toggleVisibility;

for (let i = 0; i < customIcons.length; i++) {

  const icon = customIcons[i];

  icon.onclick = toggleVisibility;

}

function toggleVisibility() {

  console.log("toggleVisibility");

  plusIcon.classList.toggle("d-none");

  minusIcon.classList.toggle("d-none");

  accordionTitle.classList.toggle("text-primary");

  if (accordionBody.style.maxHeight) {

    accordionBody.style.maxHeight = null;

  } else {

    accordionBody.style.maxHeight = accordionBody.scrollHeight + "px";

  }

};

Replace the content of the CSS window with this code snippet to style the fragment and hide the accordion-body element:

								.accordion-entry .accordion-body {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

.accordion-entry .content-area {

  max-width: 860px;

}

.accordion-entry .custom-icon {

  cursor: pointer;

  height: 24px !important;

  width: 24px !important;

}

.text-primary {

  color: #1D8C8C !important;

}

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.

Note

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.