כפתור קרא עוד לטקסט ארוך

				
					<script>
document.addEventListener('DOMContentLoaded', function() {
  const textWidgets = document.querySelectorAll('.elementor-text-editor');

  textWidgets.forEach((textWidget) => {
    const originalContent = textWidget.innerHTML.trim();
    if (!originalContent) return;

    const wrapper = document.createElement('div');
    wrapper.classList.add('read-more-wrapper');
    wrapper.innerHTML = `
      <div class="truncated-text"></div>
      <div class="full-text"></div>
      <div class="read-more-footer">
        <div class="gradient-overlay"></div>
        <button class="read-more-btn" type="button">קרא עוד</button>
      </div>
    `;

    textWidget.innerHTML = '';
    textWidget.appendChild(wrapper);

    const readMoreBtn = wrapper.querySelector('.read-more-btn');
    const truncatedText = wrapper.querySelector('.truncated-text');
    const fullText = wrapper.querySelector('.full-text');

    truncatedText.innerHTML = originalContent;
    fullText.innerHTML = originalContent;

    // צבע ברירת מחדל
    readMoreBtn.style.backgroundColor = 'var(--e-global-color-secondary)';

    readMoreBtn.addEventListener('click', function () {
      const isExpanded = wrapper.classList.toggle('expanded');
      readMoreBtn.textContent = isExpanded ? 'סגור' : 'קרא עוד';
      fullText.style.maxHeight = isExpanded ? (fullText.scrollHeight + 'px') : '0px';

      readMoreBtn.style.backgroundColor = isExpanded
        ? 'var(--e-global-color-primary)'
        : 'var(--e-global-color-secondary)';
    });
  });
});
</script>

<style>
/* מבנה עמודי מלא */
.read-more-wrapper {
  --closed-lines: 7; /* כמה שורות במצב סגור */
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* טקסט סגור */
.truncated-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--closed-lines);
  overflow: hidden;
}

/* טקסט פתוח */
.full-text {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.read-more-wrapper.expanded .truncated-text {
  display: none;
}
.read-more-wrapper.expanded .full-text {
  max-height: 2000px;
}

/* תחתית הכרטיס */
.read-more-footer {
  margin-top: auto;
  text-align: center;
  position: relative;
}

/* גרדיאנט – נראה רק כשהכרטיס סגור */
.gradient-overlay {
  position: absolute;
  top: -36px;
  left: 0;
  right: 0;
  height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  transition: opacity 0.3s ease;
}
.read-more-wrapper.expanded .gradient-overlay {
  opacity: 0;
}

/* הכפתור */
.read-more-btn {
  background-color: var(--e-global-color-secondary);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 5px 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 0.95rem;
}
.read-more-btn:hover {
  background-color: var(--e-global-color-primary);
}

/* מתיחת כרטיסים בגריד */
.elementor-grid,
[data-elementor-type="container"].elementor-element .e-con {
  align-items: stretch;
}
</style>