Creating a collapsible markdown on one page

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.

@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/

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

Thank you I'll give it a shot!

Thanks so much for this joepsnell - looks great!

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>

@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>

!

@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.

@joepsnell

Thank you so much for the swift and helpful reply! It works perfect now and makes sense

No problem, glad to help. Feel free to reach out if you hit any more questions!

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!

@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! :)

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

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.

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?

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.

@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!

@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!

@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)

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.

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!

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!

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 🙂

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?

Anyone know how to tweak this so that the revealed text goes downwards instead of being revealed upwards? More like an accordion?