I'm trying to add read more links to different sections of a WordPress page, that when clicked is expected to display the contents hidden with CSS by default. Below are a couple of sections in the HTML format. I need to create multiple similar sections.
Section 1:
<p>What kinds of gifts should you 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">How much should you spend? Should corporate gifts for employees be company-branded? Our expert team will help you choose memorable, unique gifts for your employees and office staff.</div>
Section 2:
<p> Deepen employee engagement and impress new hires while giving employee gifts that are meaningful and memorable. <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">From empowering underserved women with job skills to supporting sustainability efforts every gift creates an impact. Our Impact Booklet showcases these inspiring stories, providing a unique experience for gift recipients.</div>
<p> </p>
Since both the sections use same classes, I added data-more-link-id="1" and data-more-content-id="1" to each section to target a specific section. The jQuery code I wrote is below, which is wrong somewhere. Could you please help me fix it?
$('.more-link-pwp').click(function() {
// get data-more-link-id
var dataMorelinkid = $(this).attr("data-more-link-id");
// get data-more-content-id
var dataMorecontentid = = $(.more-content-pwp).attr("data-more-content-id");
// Iterate through dataMorecontentid.
for (let i = 0; i < dataMorecontentid.length; i++) {
if (dataMorecontentid[i] == dataMorelinkid) {
// Change CSS for the classes whose data-more-content-id matches data-more-link-id.
$('.more-content-pwp').css('display', 'block');
$(this).css('display', 'none');
return false;
}
});
CSS: .more-content-pwp {display: none;}
What I'm trying to achieve is whenever a read more link is clicked, only the hidden content specific to that more link should be displayed, not the contents from other sections that use the same class.
$('.more-link-pwp').click(function() {
// get data-more-link-id
var dataMorelinkid = $(this).attr("data-more-link-id");
$(this).hide(); // update 1
$(".more-content-pwp").each(function(){
// $(this).hide(); // update 2
const id = $(this).attr('data-more-content-id');
if(id == dataMorelinkid){
$(this).show();
}
});
});.more-content-pwp{
display:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>What kinds of gifts should you 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">How much should you spend? Should corporate gifts for employees be company-branded? Our expert team will help you choose memorable, unique gifts for your employees and office staff.</div>
<p> Deepen employee engagement and impress new hires while giving employee gifts that are meaningful and memorable. <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">From empowering underserved women with job skills to supporting sustainability efforts every gift creates an impact. Our Impact Booklet showcases these inspiring stories, providing a unique experience for gift recipients.</div>
<p> </p>The below line will output a string not an array.
var dataMorecontentid = = $(.more-content-pwp).attr("data-more-content-id");
The below code works.