How to Add Collapsible (Expandable) Sections in HivePress Listing Description

[Rakshith]

How to add collapsible (expandable) sections in a HivePress listing description like the example shown, and will this customization affect SEO or any performance.

[kseniia]

Hi,

The customization is required for this case.

You could either use an accordion plugin or implement the functionality with plain jQuery or JavaScript. For example, you could use the attribute text in the Ternary area, target the elements via attribute CSS classes with JS, and display them as collapsible sections when the page loads.

Hope this helps.

[Rakshith]

Can we use this HTML code inside the HivePress listing description, and will it work properly?

<details class="hp-collapsible">
  <summary>Collapsible Section Title</summary>
  <div class="hp-collapsible-content">
    <p>A collapsible content section.</p>
  </div>
</details>

[ChrisB]

Hi @Rakshith,

The description field won’t render this on the front-end. However, you can use this in the Format - Display section if you add this as a custom attribute.

For example:

<details class="hp-collapsible">
  <summary>%label%</summary>
  <div class="hp-collapsible-content">
    <p>%value%</p>
  </div>
</details>

You could then use some custom CSS to help achieve the design/styles shown in your example.

I hope this helps!

Cheers,
Chris

[Rakshith]

It requires five attributes, and adding more attributes can affect performance. That’s why I recommend using HTML in the listing description —It will also help with SEO.

[Rakshith]

HivePress listing description is stripping the <summary></summary> tag. How can I fix this issue? Please help.

[ChrisB]

Hi @Rakshith,

I haven’t tested it, but HivePress’s AI suggested this snippet which you can possibly use to allow for summary tags.

add_filter(
	'hivepress/v1/models/listing',
	function( $model ) {
		$model['fields']['description']['editor'] = true;
		$model['fields']['description']['html'] = [
			'p' => [],
			'br' => [],
			'strong' => [],
			'em' => [],
			'a' => ['href' => [], 'target' => []],
			'details' => ['open' => []],
			'summary' => [],
		];
		return $model;
	},
	1000
);

Edit: Snippet updated.

I hope this helps!

Cheers,
Chris

[kseniia]

This code wouldn’t work because the collapsible behavior requires JavaScript logic, the HTML markup alone isn’t enough. Adding the hp-collapsible class won’t automatically turn it into a collapsible block. For interactive elements like this, you’d need either a dedicated plugin or some custom JS.

Regarding the <summary> tag: by default, the Description field strips HTML for security reasons. You can allow specific HTML tags using the snippet that ChrisB shared earlier.

[Rakshith]

I implemented this in the listing description, and it is working fine. With some CSS.

[kseniia]

Thanks for the update.

Glad that you implemented the desired feature.