How to override a CSS rule for a class whose data-attribute value matches with that of an anchor tag-CodePudding

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  href="#" data-more-link-id="1">Read More.</a></p>
<div  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  href="#" data-more-link-id="2">Read More.</a></p>
<div  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>&nbsp;</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.

CodePudding user response：

$('.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  href="#" data-more-link-id="1">Read More.</a></p>
<div  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  href="#" data-more-link-id="2">Read More.</a></p>
<div  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>&nbsp;</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.