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

joepsnell

Circle Member
  • Posts

    12
  • Joined

  • Last visited

Reputation Activity

  1. Like
    joepsnell got a reaction from Ali_Gerry in 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.
×
×
  • Create New...