[Resolved] Using Read more button in Archives pages

[Nathan]

Hello,

I’m creating now texts to Archives pages and I would like to just show the first paragraph and then after it have a read more button so the user can see the rest of the paragraphs. I tried everything but I couldn’t do it. I already tried create a new php snippet using some plugin but didn’t worked. Can someone help me with it?

For example this page:
Added the page to the private information

It has already the ” read more” button added when I was creating the text using the editor but this button doesn’t appear. I would like to add these read more buttons that would hide the other paragraphs just in these categories pages.

Thank you in advance!

[David]

Hi there,

not easy, takes a bit of custom work, try this:

1. Create a New Hook Element

1.1 In the text area add the following code:

<div class="read-more-wrapper">
<a id="read-more-toggle" class="button" href="#">
<span class="more">Read more</span><span class="less">Read less</span>
</a>
</div>

<script>
var toggle = document.querySelector('#read-more-toggle');
var toggleContainer = document.querySelector('.taxonomy-description');

toggle.onclick = function() {
    toggleContainer.classList.toggle('active');
}
</script>

1.2 Note in the HTML this part:
<span class="more">Read more</span><span class="less">Read less</span>
Here you need to set the Read more and Read less text.

1.3 Set the Hook to: generate_after_archive_description

1.4 Set the Display Rules to: All Archives or just the specific category / tag archives you need.

1.5 Publish that

2. Add this CSS to your site:

.taxonomy-description {
    max-height: 300px;
    overflow: hidden;
    padding-bottom: 100px;
    position: relative;
    transition: max-height 0.3s ease-in;
}

.taxonomy-description.active {
    max-height: 1000px;
    transition: max-height 0.3s ease-in;
}

.taxonomy-description:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(1deg, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 100%);
}

.read-more-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;

}

.taxonomy-description:not(.active)+.read-more-wrapper .less,
.taxonomy-description.active+.read-more-wrapper .more {
    display: none;
}

[Nathan]

Hello!

Good news and bad news…

It worked the button with the implementation! But also messed up the full page design, I think it’s something related to the already existing CSS code the generatepress had in the custom CSS field. I will send here the code that it has there before, maybe this conflict is what is making the design strange, basically, the number of the page field went to the TOP, the pictures that were in columns 2 by 2 now are in just one big column.

Additional CSS.

/* GeneratePress Site CSS */ #site-navigation {
border-top: 1px solid rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(0,0,0,0.1);
}

button, html input[type=”button”], input[type=”reset”], input[type=”submit”], a.button, a.button:visited {
border-width: 1px;
border-style: solid;
border-color: inherit;
}

.mc4wp-form-fields input[type=”email”] {
margin-bottom: 10px;
width: 100%;
}

.entry-meta {
font-weight: 300;
font-size: 13px;
}

.main-navigation:not(.toggled) li.menu-social > a,
.main-navigation:not(.toggled) li.search-item > a{
padding: 0 10px;
}

.post-image img {
transition: opacity 500ms;
}

.post-image img:hover {
opacity: 0.9;
}

.no-sidebar .entry-content {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

.page.no-sidebar .entry-title {
text-align: center;
}

.top-bar .lsi-social-icons a,
.top-bar .lsi-social-icons a:focus,
.top-bar .lsi-social-icons a:active,
.top-bar .lsi-social-icons a:hover {
background: transparent !important;
}

.top-bar .lsi-social-icons li {
margin-bottom: 0 !important;
}

If its not the CSS the was there before I dont know what could help, if you need more info let me know

[David]

Nah, its just me being an idiot.. in the HTML remove the last </div>. I edited my reply above to reflect that.

[Nathan]

oh thank you a lot, I see it worked perfectly now. The only thing that I still see that can be a problem is when I open the read more the blocks appear in the front of the text, how could I solve it?

[David]

Oh.. do you have Masonry option enabled on the Blog page ?
As thats going to be an issue ….

[Nathan]

Turned off and worked, thank you so much!

[David]

Glad to be of help!

[Author]

Posts