suz_mala Posted June 13, 2016 Share Posted June 13, 2016 Hi there! Just wondering if anyone could help in regards to making a collapsible "click to reveal" type of text on this page for the text that isn't in bold font. Just to make the page less cluttered: http://www.malamoonphoto.com.au/pricing-packages/#sessions Thanks, I appreciate your time, Suz :) Link to comment
joepsnell Posted June 13, 2016 Share Posted June 13, 2016 Here is a solution using only custom css and a code block. Live example with styling here: http://codepen.io/josephsnell/pen/ZOWvbo Place this in a code block on the page you want the text to be. Fill in your information in the respective paragraphs (visible and hidden). <div class="show-hide"> <input type="checkbox" class="read-more-state" id="visible" /> <div class="read-more-wrap"> <p>Visible Paragraph</p> <p class="read-more-target">Hidden Paragraph</p> </div> <label for="visible" class="read-more-trigger"></label> </div> Then add this to your custom css in settings. .read-more-state { display: none; } .read-more-target { opacity: 0; max-height: 0; font-size: 0; } .read-more-state:checked ~ .read-more-wrap .read-more-target { opacity: 1; font-size: inherit; max-height: 999em; } .read-more-state ~ .read-more-trigger:before { content: 'Read More'; } .read-more-state:checked ~ .read-more-trigger:before { content: 'Read Less'; } .read-more-trigger { cursor: pointer; display: inline-block; padding: 0 .5em; color: #666; font-size: .9em; line-height: 2; border: 1px solid #ddd; border-radius: .25em; } .read-more-trigger:hover { background:#666; color:white; } You can edit the styles however you wish, with colors or transitions. This is just to get you started. Link to comment
suz_mala Posted June 14, 2016 Author Share Posted June 14, 2016 Thank you I'll give it a shot! Link to comment
LindaG Posted October 15, 2016 Share Posted October 15, 2016 Thanks so much for this joepsnell - looks great! Link to comment
ospr Posted November 24, 2016 Share Posted November 24, 2016 Thanks for this @joepsnell - it's awesome! I'm having a problem though with formatting the text in the hidden paragraph. When I try to add heading tags or list tags it breaks the 'read more' functionality. Any ideas how I can add formatting to the hidden paragraph? Below is what I've tried to add. I've tested it step by step and the tags that cause props are h3, ul and li. Any time I add any of those, the final /p tag shows an error and the functionality breaks. I only know super basic HTML so am hopeless at troubleshooting. Would really appreciate any help. <div class="show-hide"> <input type="checkbox" class="read-more-state" id="visible" /> <div class="read-more-wrap"> <p>Developmental editing, also called structural or content editing, is designed to check the bones of your book to make sure everything necessary is included and in the right place. The goal is to <b>take your good story and make it great</b>. For this service, we read the entire manuscript at least twice and provide a written critique with suggestions at the level of the entire book and individual chapters. This edit also includes two Skype calls with your editor.</p> <p class="read-more-target"> <h3>What do I get?</h3> Your developmental edit includes: <ul> <li>A 30-minute Skype call <i>prior to</i> editing so your editor can understand your vision and unique voice;</li> <li>A written critique that addresses what’s working and what could be improved at book and chapter levels;</li> <li>A second 30-minute Skype call <i>after</i> receiving your critique to ask your editor questions and brainstorm solutions to problems;</li> <li>A PDF guide to implementing changes suggested by your editor; and</li> <li>Recordings of both Skype calls.</li> </ul> </p> </div> <label for="visible" class="read-more-trigger"></label> </div> Link to comment
Guest Posted February 9, 2018 Share Posted February 9, 2018 @ospr I realize this answer is super late, but well, I just saw it. The problem with your above html is that <p class="read-more-target" should actually read <div class="read-more-target" because the <p> is for paragraphs only - meaning that your unordered list and headers throw an error. By making the "read-more-target" its own element, you avoid this problem. Hope it helps! P.S. - Don't forget to close it out with </div> instead of the </p> ! Link to comment
lukegram Posted February 16, 2018 Share Posted February 16, 2018 @joepsnell Do you know how to get this to work for 3 seperate code blocks all operating on the same page. I basically copied and did 3 side by side (I have 3 items with text below) but when I test it, clicking on any of the 3 "read more" buttons only opens the first one. https://www.oddfactory.io/onlinestore/ Link to comment
joepsnell Posted February 16, 2018 Share Posted February 16, 2018 @lukegram Sure! So the reason that all of them open the first one is these parts of the code here: <input type="checkbox" class="read-more-state" id="visible" /> and <label for="visible" class="read-more-trigger"></label> The checkbox is what controls the open or closed state, so the the label 'for' attribute needs to match the id of the checkbox. Here is a codepen with an example, note the different ids for each block. https://codepen.io/anon/pen/ddJMNp?editors=1100 So as long as each input has a different id, and the label 'for' within that block matches the id of the input, you are good to go! Let me know if any of that didn't make sense. Link to comment
lukegram Posted February 17, 2018 Share Posted February 17, 2018 @joepsnell Thank you so much for the swift and helpful reply! It works perfect now and makes sense Link to comment
joepsnell Posted February 17, 2018 Share Posted February 17, 2018 No problem, glad to help. Feel free to reach out if you hit any more questions! Link to comment
kristianj Posted February 22, 2018 Share Posted February 22, 2018 Hey @joepsnell! This great! I have a slight problem where after the reveal, if you close it again it screws the content layout below it and doesn't reset to its normal state. Any ideas?? Thanks! Link to comment
EvanKnox Posted March 8, 2018 Share Posted March 8, 2018 @joepsnell I am aware that this is from quite awhile ago, but I've tried this and it shows the button in the correct place but the button isn't a link to anything and the hover doesn't work. Here is my code inside a Markdown Block and Custom CSS <div class="show-hide"> <input type="checkbox" class="read-more-state" id="visible" /> <div class="read-more-wrap"> <p> When it comes to Social Media Marketing for their businesses, many people feel dissatisfied, overwhelmed, or that they are missing out. At KnoxMedia we help companies build their brand and sell more stuff through ENGAGING Social Media Marketing. </p> <p> The human brain pays attention to information that helps it survive and thrive. If your content on Social Media and beyond doesn't provide your audience that value, you've become white noise. </p> <div class="read-more-target"> <p> Because businesses are so close to their products and services, it can be especially challenging to create content that your audience understands and wants to engage with. </p> <p> If that wasn’t difficult enough, there is also the rapidly changing digital landscape of algorithms, updates, and progressively shorter attention spans. Business leaders: don't be dismayed because we care about your business and want to help you enjoy consistent, predictable, and scalable growth. </p> <p> Unlike hiring a team in-house, we must habitually help you build your brand and sell more stuff so that we keep you as a client at the end of each short term agreement. We've got all the best content creators, designers, marketers, and social media experts in place which enable you to scale A-La-Cart. </p> <p> Our founder, Evan Knox, started our company with the deep conviction that no great business should have lousy content. From Social Media, websites, and everything in between we produce Marketing that works. If you're an entrepreneur or small business, you'll have a reduced workload and increased peace of mind. You'll be so proud of your brand's social media that you'll be showing it to all your friends. If you're a Medium or Large business, you'll be able to lower your fixed overhead and improve your marketing ROI. </p> <p> Be wary of having the wrong people producing your content as it may be damaging to your brand and wasting precious marketing resources. Your competition loves finding you under those circumstances. </p> <p> What makes us uniquely different is that we are one of the few agencies who let you, metaphorically, go on a date with us before any long-term commitment. We call it our "Love it or Leave us Guarantee." It's up to you do decide after the first month if we're a good fit for a short 6-month commitment. </p> <p> Get a quote today that fits your budget and goals and enjoy marketing that works! </p> </div> </div> <label for="visible" class="read-more-trigger"></label> </div> and the CSS: .read-more-state { display: none; } .read-more-target { opacity: 0; max-height: 0; font-size: 0; } .read-more-state:checked ~ .read-more-wrap .read-more-target { opacity: 1; font-size: inherit; max-height: 999em; } .read-more-state ~ .read-more-trigger:before { content: 'Read More'; } .read-more-state:checked ~ .read-more-trigger:before { content: 'Read Less'; } .read-more-trigger { cursor: pointer; display: inline-block; padding: 0 .5em; color: #666; font-size: .9em; line-height: 2; border: 1px solid #ddd; border-radius: .25em; } .read-more-trigger:hover { background:#666; color:white; } Thank you for any help! :) Link to comment
joepsnell Posted March 8, 2018 Share Posted March 8, 2018 It's possible that the issue comes from the fact that you put it in a markdown block and not a code block. I feel that it should work regardless, but that's something you can try. Your code is working for me here: https://codepen.io/josephsnell/pen/WzNEGE?editors=1100 Link to comment
alejandradelfin Posted March 21, 2018 Share Posted March 21, 2018 Hi,I am using this code and have two problems.1- the "Hidden text" content more than one paragraph2- When clicking "read less" the page take me to the footer instead that the begining of the "Visible Text"Please help Link to comment
joepsnell Posted March 21, 2018 Share Posted March 21, 2018 You'll need to post your code for anyone to be able to help you. Try putting it in codepen.com with the html and css in the correct areas. Link to comment
sandracheesman Posted August 10, 2018 Share Posted August 10, 2018 Hi @joepsnell the code works brilliantly - thank you! My only issue is when I click 'read more' the 'read less' button is then very close to the last paragraph - no gap like there is Images attached. Any ideas? Link to comment
joepsnell Posted August 10, 2018 Share Posted August 10, 2018 If you put your code in a Codepen I can help you directly, but the reason that is happening, is your custom css is affecting the paragraph. You need to add a margin-bottom or padding-bottom to the paragraph above the button. If you attach some of your html and css though I can give you a little bit better help. Link to comment
sandracheesman Posted August 10, 2018 Share Posted August 10, 2018 @joepsnell here is the codepen https://codepen.io/sandracheesman/pen/yqZyry it is based on your original codepen you kindly gave on here. On the codepen the gap is much more equal than on the site, which you can see from the images? Any ideas? Thank you! Link to comment
sandracheesman Posted August 13, 2018 Share Posted August 13, 2018 @joepsnell here is the codepen https://codepen.io/sandracheesman/pen/yqZyry it is based on your original codepen you kindly gave on here. On the codepen the gap is much more equal than on the site, which you can see from the images? Any ideas? Thank you! Link to comment
sandracheesman Posted August 13, 2018 Share Posted August 13, 2018 @joepsnell This is the Custom CSS code:.read-more-state { display: none; } .read-more-target { opacity: 0; max-height: 0; font-size: 0; } .read-more-state:checked ~ .read-more-wrap .read-more-target { opacity: 1; font-size: inherit; max-height: 999em; } .read-more-state ~ .read-more-trigger:before { content: 'READ MORE'; } .read-more-state:checked ~ .read-more-trigger:before { content: 'READ LESS'; } .read-more-trigger { cursor: pointer; display: inline-block; padding: 0 .9em; color: #156; background-color: #fff; font-family: raleway; font-size: 0.8em; font-weight: bold; letter-spacing: 3px; line-height: 3; border: 2px solid #156; border-radius: .25em; } .read-more-trigger:hover { background:#156; color:white; } and this is the page code: .read-more-state { display: none; } .read-more-target { opacity: 0; max-height: 0; font-size: 0; } .read-more-state:checked ~ .read-more-wrap .read-more-target { opacity: 1; font-size: inherit; max-height: 999em; } .read-more-state ~ .read-more-trigger:before { content: 'READ MORE'; } .read-more-state:checked ~ .read-more-trigger:before { content: 'READ LESS'; } .read-more-trigger { cursor: pointer; display: inline-block; padding: 0 .9em; color: #156; background-color: #fff; font-family: raleway; font-size: 0.8em; font-weight: bold; letter-spacing: 3px; line-height: 3; border: 2px solid #156; border-radius: .25em; } .read-more-trigger:hover { background:#156; color:white; } I hope that helps? It is based on the pencode you kindly provided :o) Link to comment
detraform Posted May 31, 2019 Share Posted May 31, 2019 Hy @joepsnell, I love this plugin. I'm wondering if you have an idea what I would do for a bilingual website. On the Spanish side I want it to say Leer más / Ocultar. Link to comment
caseynewman Posted August 22, 2019 Share Posted August 22, 2019 Hey hey! I know this thread is old but I wanted to chime in. @triplehigh's answer wasn't working for me - it was causing the button to lose functionality, and I couldn't format my text at all otherwise. So if anyone is still curious, you have to use <p class="read-more-target"></p> surrounding each individual paragraph in order for that to work! Hope that's helpful! Link to comment
caseynewman Posted August 22, 2019 Share Posted August 22, 2019 Hey all! So this wasn't working for me - it was causing the button to lose functionality, and I couldn't format my text at all otherwise. So if anyone is still curious, you have to use <p class="read-more-target"></p> surrounding each individual paragraph in order for that to work! Hope that's helpful! Link to comment
FijiAnni Posted January 7, 2020 Share Posted January 7, 2020 Hi @joepsnell I was wondering if it is possible to format it so that the invisible paragraph is actually different paragraphs with headers. I'm essentially using this as an overview, and I want the read more button to expand to reveal various other subcategories with accompanying paragraphs. As opposed to one long paragraph with no variance in format. Thanks 🙂 Link to comment
doglovesandiego Posted March 13, 2020 Share Posted March 13, 2020 1. Can you tell me how to take out the checkbox? 2. If I want one of the 'read more' boxes on one page to say 'read our story' and want another box on a different page to just say 'read more' is this possible with the custom CSS? Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.