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".
This site and all of its contents are copyright © 2022 Images in the Backcountry / Mike Matenkosky – All rights reserved.
By using this site you agree to our Privacy Policy.