Using Read more button in Archives pages

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;
}

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

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

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?

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

Turned off and worked, thank you so much!

Glad to be of help!