Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
suz_mala

Creating a collapsible markdown on one page

Question

23 answers to this question

Recommended Posts

  • 1

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.

Edited by joepsnell
added live example link.

Share this post


Link to post
  • 0

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>





Share this post


Link to post
  • 0

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

!

Edited by triplehigh
Initial Revision

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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 alt text Images attached.

Any ideas?

read-more-test.jpg.65b5b93aeb7bf92847544f924db9faab.jpg

read-less-test.jpg.56b4199b3689643e89d835484f03e2d6.jpg

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • -1

Hi ,

Please check this video demonstration of how to insert accordion in the Squarespace website using markdown block .


I am a Squarespace developer . I have a channel in you tube https://www.youtube.com/channel/UCfHTuXFfsL6eFZynUfj3cdg Contact Me for more details : nidhidhiman004@gmail.com My website: http://galacticsquare.in/

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...