HTML in metafields as rich text in accordion product page

Store Design
, , ,
1

Hi Folks,

I am wondering of you someone can help me.

I have an accordion on the main-product.liquid, it has a title and a panel.

When I define the panel as a multiline and just put in some code in the metafield it works.

When I put in
in the multiline the accordions stil works fine.

How over when I use a div or a ul in the multiline, it is fallen out of the panel.

and it visible, where it should only be visible by opening the panel.

So I read that the the better option was rich text.

I tried that, but gives me a this:

{“type”:“root”,“children”:[{“type”:“paragraph”,“children”:[{“type”:“text”,“value”:“blablablabla”}]}]}

I found this peace of info:

{%- if product.metafields.custom.olfactory_notes != blank -%}
    {{ product.metafields.custom.olfactory_notes | **metafield_tag** }}
{%- endif -%}

this makes the rich text working, and solves this:

{“type”:“root”,“children”:[{“type”:“paragraph”,“children”:[{“type”:“text”,“value”:“blablablabla”}]}]}

however the info from the panel is still panel, how can I get that in the panel in the accordion working.

this is my code:

  • {{ product.metafields.custom.verjaardag_title }}

    {{ product.metafields.custom.verjaardag_description }}

this is the js code:

$(function() {
// (Optional) Active an item if it has the class “is-active”
$(“.accordion > .accordion-item.is-active”).children(“.accordion-panel”).slideDown();

$(“.accordion > .accordion-item”).click(function() {
// Cancel the siblings
$(this).siblings(“.accordion-item”).removeClass(“is-active”).children(“.accordion-panel”).slideUp();
// Toggle the item
$(this).toggleClass(“is-active”).children(“.accordion-panel”).slideToggle(“ease-out”);
});
});

Can someone help or suggest a way to het html in metafields?
Thanks,
A.
1 Like