Read More tag

Hello I added this code for read more on .wd-term-desc and .term-description it works normally. But when I click to filter it doesnt work could you help

Test page : https://woocommerce-1246687-4467891.cloudwaysapps.com/chairs/

On document ready JS
`jQuery(document).ready(function($) {
// Maximum length of the description for desktop and mobile
var maxLengthDesktopTerm = 250; // Masaüstü için term-description için karakter sayısı
var maxLengthMobileTerm = 120; // Mobil için term-description için karakter sayısı

var maxLengthDesktopWd = 300; // Masaüstü için wd-term-desc için karakter sayısı
var maxLengthMobileWd = 150; // Mobil için wd-term-desc için karakter sayısı

// Function to toggle between full and shortened description
function toggleDescription($description, fullDescription, shortenedDescription, maxLength) {
var $readMore = $description.find(‘.vocarte.read-more’);
var $readLess = $description.find(‘.vocarte.read-less’);

$description.find(‘p’).html(fullDescription + ‘<br><span class=”vocarte read-less”> <span class=”toggle-description”>Read Less</span></span>’);
$readMore.remove();
$readLess.show();
}

// Loop through all term-description elements
$(‘.term-description’).each(function() {
var $this = $(this);
var description = $this.find(‘p’).text();

// Determine maximum length based on device type
var maxLength = window.innerWidth > 768 ? maxLengthDesktopTerm : maxLengthMobileTerm;
var shortenedDescription = description.substring(0, maxLength);
var fullDescription = description;

// If the description is longer than the maximum length
if (description.length > maxLength) {
// Show the shortened description, add “Read More” link
$this.find(‘p’).html(shortenedDescription + ‘<br><span class=”vocarte read-more”>… <span class=”toggle-description”>Read More</span></span>’);

// Toggle between full and shortened description on “Read More” or “Read Less” click
$this.on(‘click’, ‘.toggle-description’, function(e) {
e.preventDefault(); // Sayfanın en üstüne gitmeyi önle
var scrollPosition = $(window).scrollTop(); // Mevcut scroll pozisyonunu kaydet
if ($this.find(‘.vocarte.read-more’).is(‘:visible’)) {
toggleDescription($this, fullDescription, shortenedDescription, maxLength);
} else {
$this.find(‘p’).html(shortenedDescription + ‘<br><span class=”vocarte read-more”>… <span class=”toggle-description”>Read More</span></span>’);
}
$(window).scrollTop(scrollPosition); // Kaydedilen scroll pozisyonuna geri dön
});
}
});

// Loop through all wd-term-desc elements
$(‘.wd-term-desc’).each(function() {
var $this = $(this);
var description = $this.find(‘p’).text();

// Determine maximum length based on device type
var maxLength = window.innerWidth > 768 ? maxLengthDesktopWd : maxLengthMobileWd;
var shortenedDescription = description.substring(0, maxLength);
var fullDescription = description;

// If the description is longer than the maximum length
if (description.length > maxLength) {
// Show the shortened description, add “Read More” link
$this.find(‘p’).html(shortenedDescription + ‘<br><span class=”vocarte read-more”>… <span class=”toggle-description”>Read More</span></span>’);

// Toggle between full and shortened description on “Read More” or “Read Less” click
$this.on(‘click’, ‘.toggle-description’, function(e) {
e.preventDefault(); // Sayfanın en üstüne gitmeyi önle
var scrollPosition = $(window).scrollTop(); // Mevcut scroll pozisyonunu kaydet
if ($this.find(‘.vocarte.read-more’).is(‘:visible’)) {
toggleDescription($this, fullDescription, shortenedDescription, maxLength);
} else {
$this.find(‘p’).html(shortenedDescription + ‘<br><span class=”vocarte read-more”>… <span class=”toggle-description”>Read More</span></span>’);
}
$(window).scrollTop(scrollPosition); // Kaydedilen scroll pozisyonuna geri dön
});
}
});

// Function to handle window resize event
$(window).resize(function() {
// Loop through all term-description elements and update description lengths
$(‘.term-description’).each(function() {
var $this = $(this);
var description = $this.find(‘p’).text();

// Determine maximum length based on device type
var maxLength = window.innerWidth > 768 ? maxLengthDesktopTerm : maxLengthMobileTerm;

// Update shortened description
var shortenedDescription = description.substring(0, maxLength);

// If the description is longer than the maximum length and Read More button is visible,
// update the description text to match the new maximum length
if (description.length > maxLength && $this.find(‘.vocarte.read-more’).is(‘:visible’)) {
$this.find(‘p’).html(shortenedDescription + ‘<br><span class=”vocarte read-more”>… <span class=”toggle-description”>Read More</span></span>’);
}
});

// Loop through all wd-term-desc elements and update description lengths
$(‘.wd-term-desc’).each(function() {
var $this = $(this);
var description = $this.find(‘p’).text();

// Determine maximum length based on device type
var maxLength = window.innerWidth > 768 ? maxLengthDesktopWd : maxLengthMobileWd;

// Update shortened description
var shortenedDescription = description.substring(0, maxLength);

// If the description is longer than the maximum length and Read More button is visible,
// update the description text to match the new maximum length
if (description.length > maxLength && $this.find(‘.vocarte.read-more’).is(‘:visible’)) {
$this.find(‘p’).html(shortenedDescription + ‘<br><span class=”vocarte read-more”>… <span class=”toggle-description”>Read More</span></span>’);
}
});
});
});

Have a nice day

Hi sergenadiyaman,

Thanks for reaching to us.

Unfortunately, additional customization is outside the scope of our basic support.

Thanks for your understanding.

Regards,

[Author]

Posts