Using Read more button in Archives pages

This topic has 7 replies, 2 voices, and was last updated 3 years, 3 months ago by David.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
January 18, 2023 at 3:24 am #2499908

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!

January 18, 2023 at 8:18 am #2500438
David
Staff
Customer Support
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;
}
```
January 18, 2023 at 8:59 am #2500495

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

January 18, 2023 at 9:27 am #2500522

David
Staff
Customer Support

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

January 18, 2023 at 9:33 am #2500532

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?

January 18, 2023 at 9:44 am #2500549

David
Staff
Customer Support

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

January 18, 2023 at 9:51 am #2500558

Nathan

Turned off and worked, thank you so much!

January 19, 2023 at 3:10 am #2501235

David
Staff
Customer Support

Glad to be of help!
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

[Resolved] Using Read more button in Archives pages

Popular Articles

[Resolved] Using Read more button in Archives pages

Popular Articles

Start building better websites today.