Скачать или смотреть Overriding CSS Rules with jQuery: Show/Hide Content with Data Attributes

Learn how to effectively override CSS rules and manipulate content visibility based on data attributes using jQuery. Get your "Read More" links working perfectly!
---
This video is based on the question https://stackoverflow.com/q/71249900/ asked by the user 'CodeForGood' ( https://stackoverflow.com/u/7321290/ ) and on the answer https://stackoverflow.com/a/71250076/ provided by the user 'Alaksandar Jesus Gene' ( https://stackoverflow.com/u/2491541/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to override a CSS rule for a class whose data-attribute value matches with that of an anchor tag?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Override a CSS Rule for a Class Using Data Attributes

If you're working on a WordPress page and need to implement "Read More" links that toggle hidden content, you might run into challenges with jQuery if you're trying to manage multiple sections using similar classes. This can be especially tricky if you're relying on data attributes to target the right content. Today we’ll take a look at how to correctly manipulate CSS rules with jQuery to accomplish this task effectively.

The Problem

You want to create several sections on your page, each containing a "Read More" link. When a user clicks one of these links, only the corresponding hidden content should be displayed. However, since all links and content use the same classes, it's crucial to ensure that the JavaScript correctly identifies which content to show and hides others.

Your Initial HTML Structure

Here's what your HTML structure looks like:

[[See Video to Reveal this Text or Code Snippet]]

The challenge arises because when clicking on the "Read More" link, the displayed content relies on matching the data-more-link-id from the anchor tag to the data-more-content-id in the content div.

Fixing the jQuery Code

Here’s the corrected JavaScript code you should use:

[[See Video to Reveal this Text or Code Snippet]]

What Changed:

The original line that attempted to acquire data-more-content-id was incorrectly trying to use an array method where it should not. We retrieve the ID by referencing each content element.

Implementing CSS Styles

Finally, ensure you have the necessary CSS in place to start with hidden content:

[[See Video to Reveal this Text or Code Snippet]]

This line ensures that all the content sections are hidden when the page is loaded, thus providing a clean starting point for your "Read More" interactions.

Full Example

Now that you know how to manage the functionality, here's a brief overview of your complete code setup:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By correctly utilizing data attributes and adjusting your jQuery code, you can create a seamless user experience with "Read More" links that only show relevant content. This method enhances the content presentation on your WordPress page while avoiding display issues among sections sharing the same classes. Make sure to test your implementation to confirm that everything is working as expected. Happy coding!