Create a Custom Gallery with a Read More Link

Create a Custom Page and add a HTML/CSS Block and add the following.

HTML


<div class="container">

  <input type="radio" id="content" name="content" />
  <input type="radio" id="hidden-content" name="content" />

  <div class="content">
    <p>First part of your content here. First part of your content here. First part of your content here. First part
    of your content here. First part of your content here. First part of your content here. First part of your content here.
    First part of your content here.</p>
    <label for="content" class="read more">Read more...</label>
  </div>

  <div class="hidden-content">
    <p>The second part of your content here. The second part of your content here. The second part of your content
    here. The second part of your content here. The second part of your content here. The second part of your content here.
    The second part of your content here. </p>
    <label for="hidden-content" class="read less">Read less...</label>
  </div>

</div>

CSS


.container {
  margin: 0 auto;
  width: 50%;
}

#content,
#hidden-content,
.hidden-content,
#content:checked ~ .content .more,
#hidden-content:checked ~ .hidden-content {display: none;}

#content:checked ~ .hidden-content {display: block;}

.read {
  display: inline-block;
  width: 100%;
  text-align: center;
}

label:hover {cursor: pointer;}

Then add a 'Muliple Photos' Block below the HTML/CSS Block. In the Multiple Photos Block Settings I would use 'Open Lightbox' in the "Action on Click".

Powered by SmugMug Owner Log In