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

joepsnell

Circle Member
  • Posts

    12
  • Joined

  • Last visited

Posts posted by joepsnell

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

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