Concertina Text (Hide / Reveal) using css and HTML

Concertina / Accordian effect for hiding / revealing text or page content. This is particularly useful if your product pages have detailed specifications and / or descriptive text. It can be very useful when people are browsing your site on a hand-held or smart-phone, where long text descriptions require significant scrolling before an ACTION button (eg: "Add To Cart") is seen. The code will HIDE a block of HTML, which is REVEALED when the <DIV> is clicked. It TOGGLES from HIDE to REVEAL

This has been tested on ZC Version 2.2.2 and it functions properly.

The code is a block of CSS, which activates a <DIV CLASS> element in the HTML.

It is suitable for all areas in ZC where page content is rendered from text input by the website manager.

BACK UP your site before applying any changes!

The following CSS should be added to includes/templates/YOUR_TEMPLATE/css/stylesheet.css

/* Concertina Container */
.zc-concertina {
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

/* The Clickable Header */
.zc-concertina details summary {
  padding: 12px;
  background-color: #f4f4f4;
  color: #333;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #ddd;
  outline: none;
  list-style: none; /* Removes default arrow on some browsers */
  position: relative;
}

/* Custom indicator icon (+ sign) */
.zc-concertina details summary::-webkit-details-marker {
  display: none;
}
.zc-concertina details summary::after {
  content: '+';
  position: absolute;
  right: 15px;
}

/* Change icon when open (- sign) */
.zc-concertina details[open] summary::after {
  content: '-';
}

/* Hidden Content Panel */
.zc-concertina .concertina-content {
  padding: 15px;
  border: 1px solid #ddd;
  border-top: none;
  background-color: #fff;
  color: #000;
}

When adding the TEXT CONTENT, make sure the TEXT-EDITOR is disabled and "Plain Text" is indicated as the text editor.

Here's the relevant HTML structure:

<div class="zc-concertina">
  <details>
    <summary>Click to read Product Specifications</summary>
    <div class="concertina-content">
      <p>Your product specification text here</p>
    </div>
  </details>

  <details>
    <summary>Click to read Product Description</summary>
    <div class="concertina-content">
      <p>Your product description text here</p>
    </div>
  </details>
</div>

Additional <details> sections can be added if you need them, nested inside the <div> element.

See it in action here: https://kirstysgems.co.uk/index.php?main_page=product_info&cPath=2_5&products_id=25

:flex:
What would really be a great use of this is to add a similar option, like the Product Qty Min/Unit Mix yes/no option below the Category Description and Product Description, labeled "Use Concertina?" Yes/No with No as the default.

categoryConcertina, productConcertina, and specificationConcertina would already be defined in CSS, with appropriate text for each selection. Product Specifications could be added to the Products Creation page as a new option, along with this change.

If yes or no (default) is selected when the item is created, it will automatically display or not according to the selection at creation.

I think those should be core, with the option to still place it elsewhere if needed.

Why all the additional CSS?

I'm not clever enough to write this stuff - but XAI Grok is reasonably good at it!