Hey there CSS-Tricks community.
I am working on a info-heavy website and need to be able to hide some of the text and do a read more button/link when clicked revels the rest of the text. I have been able get it to work before on single instances but need a way for multiple instances on one page. Can anyone recommended a way to do this with jQuery?
Edited to add: After reading the link you posted, I think I may have misunderstood what you’re wanting. If you want this to be inline, the concept is similar, and only slightly more complicated. You could wrap the content you want to be expanded in a span, and use JS to dynamically insert a ‘read more’ link. I’ll fork my CodePen with an example, one sec.
Edit: Didn’t see your reply. No problem, glad I could help!
Here’s another example, of this done inline, more like the expander plugin but without the added dependency (or features). This is hacked together, and could certainly be done cleaner, just as a disclaimer.
Edited again: Cleaner version with no HTML injection, but this also removes a lot of the convenience of just adding a class to a span to handle everything for you: http://codepen.io/JoshBlackwood/pen/pEwHe
I uploaded a `readmoreless.js` file (with your code pasted in it) to `ThemeName/js` folder and in `header.php` added
Also added CSS and HTML code in page. Nothing :(
Any help would be very much appreciated…! Thank you in advance
Unless there’s something else going on, the url to the `readmoreless.js`-file is not `/js/readmoreless.js`, but is likelier to be along these lines: `wp-content/themes/ThemeName/js/readmoreless.js`, which might very well be what the issue is.
One issue I’ve encountered: if you click ‘Read More’ on more than one paragraph, then click ‘Read Less’ on any one of the paragraphs, the other paragraphs will show the ‘Read More’ link AND the additional content with the ‘Read Less’ link.