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

joepsnell

Circle Member
  • Content Count

    12
  • Joined

  • Last visited

Everything posted by joepsnell

  1. 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.
  2. 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.
  3. 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
  4. No problem, glad to help. Feel free to reach out if you hit any more questions!
  5. @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.
  6. 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.
×
×
  • Create New...