Looking to incorporate read more links into various sections of a WordPress page, where clicking the link reveals content hidden with CSS. Here are a couple of sample sections in HTML format that I aim to replicate:
Section 1:
<p>Curious about what type of gifts to give employees? <a class="more-link-pwp" href="#" data-more-link-id="1">Read More.</a></p>
<div class="more-content-pwp" data-more-content-id="1">Find out how much to spend and whether corporate branding is necessary for employee gifts. Our expert team will assist you in selecting unique and memorable gifts for your staff.</div>
Section 2:
<p>Enhance employee engagement and impress new hires through meaningful and memorable gifts. <a class="more-link-pwp" href="#" data-more-link-id="2">Read More.</a></p>
<div class="more-content-pwp" data-more-content-id="2">Every gift makes an impact, from empowering underserved women to supporting sustainability efforts. Our Impact Booklet shares inspiring stories, offering a unique experience for gift receivers.</div>
<p> </p>
Using identical classes for both sections, I assigned specific IDs (data-more-link-id="1" and data-more-content-id="1") to target each section individually. However, my current jQuery code seems to have an error. Can someone assist me in rectifying it?
$('.more-link-pwp').click(function() {
// fetch data-more-link-id
var dataMorelinkid = $(this).attr("data-more-link-id");
// retrieve data-more-content-id
var dataMorecontentid = $(.more-content-pwp).attr("data-more-content-id");
// Loop through dataMorecontentid.
for (let i = 0; i < dataMorecontentid.length; i++) {
if (dataMorecontentid[i] == dataMorelinkid) {
// Alter CSS for classes matching data-more-content-id with data-more-link-id.
$('.more-content-pwp').css('display', 'block');
$(this).css('display', 'none');
return false;
}
});
CSS:
.more-content-pwp {display: none;}The goal is to only display the hidden content relevant to the clicked read more link, without revealing content from other sections sharing the same class.