Why isn't my 'see more' and 'see less' button code working?

Why isn't my 'see more' and 'see less' button code working?

Faël
New Member
4 0 0

hello I have a problem with my code, the button "see more" is supposed to show the entire descriptions, and the button, "see less" is supposed to show the text at 20%

{% comment %}
Section de description de la collection avec boutons "Voir plus" et "Voir moins"
{% endcomment %}

<div class="collection-description">
  <div class="description-wrapper">
    {% if collection.description.size > 200 %}
      <div class="description-text{% unless collection.description_expanded %} collapsed{% endunless %}">
        {% if collection.description_expanded %}
          {{ collection.description }}
        {% else %}
          {{ collection.description | truncatewords: 50 }}
        {% endif %}
      </div>
      <div class="button-wrapper">
        <button class="toggle-description-btn">
          {% if collection.description_expanded %}
            Voir moins
          {% else %}
            Voir plus
          {% endif %}
        </button>
      </div>
    {% else %}
      <div class="description-text">
        {{ collection.description }}
      </div>
    {% endif %}
  </div>
</div>

{% schema %}
{
  "name": "Description boutons",
  "settings": [
    {
      "type": "range",
      "id": "text_margin",
      "label": "Marge du texte (en pixels)",
      "default": 20,
      "min": 0,
      "max": 50,
      "step": 5
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Couleur du bouton",
      "default": "#333333"
    },
    {
      "type": "range",
      "id": "button_size",
      "label": "Taille du bouton (en pixels)",
      "default": 14,
      "min": 10,
      "max": 20,
      "step": 1
    },
    {
      "type": "range",
      "id": "button_border_radius",
      "label": "Arrondi du bouton (en pixels)",
      "default": 5,
      "min": 0,
      "max": 10,
      "step": 1
    },
    {
      "type": "select",
      "id": "button_alignment",
      "label": "Alignement du bouton",
      "default": "left",
      "options": [
        { "value": "left", "label": "Gauche" },
        { "value": "center", "label": "Centre" },
        { "value": "right", "label": "Droite" }
      ]
    }
  ],
  "presets": [
    {
      "category": "Description",
      "name": "Description de la collection avec boutons",
      "settings": {
        "text_margin": 20,
        "button_color": "#333333",
        "button_size": 14,
        "button_border_radius": 5,
        "button_alignment": "left"
      }
    }
  ]
}
{% endschema %}

<style>
  .collection-description {
    margin-bottom: 30px;
  }
  .description-wrapper {
    margin: 0 auto;
    padding: 0 {{ section.settings.text_margin }}px;
    max-width: 800px;
    text-align: justify;
  }
  .description-text {
    margin-bottom: 20px;
    overflow: hidden;
    transition: height 0.3s ease;
  }
  
  .description-text.collapsed {
    height: auto;
  }


  .button-wrapper {
    text-align: {{ section.settings.button_alignment }};
  }
  .toggle-description-btn {
    background-color: {{ section.settings.button_color }};
    color: #fff;
    border: none;
    padding: 8px {{ section.settings.button_size }}px;
    border-radius: {{ section.settings.button_border_radius }}px;
    cursor: pointer;
  }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    $('.toggle-description-btn').on('click', function() {
      var $descriptionText = $(this).closest('.description-wrapper').find('.description-text');
      $descriptionText.toggleClass('collapsed');
      if ($descriptionText.hasClass('collapsed')) {
        $(this).text('Voir plus');
      } else {
        $(this).text('Voir moins');
      }
    });
  });
</script>

help plz

Replies 0 (0)