Docs

[TheWasteTransformers]

Hi guys,

I have a text on my website, and I want the visitor to enable to read the first paragraph, and next to that I want to write: ‘Tell me more’. Once they click on this, the complete text need to roll out. (I hope you understand what I mean). At the moment there is a long story on my homepage and I just want to make this on the first notice shorter, by enabling a kind of link ‘Tell me more’.

Any idea how I can do this? I wanted to do this for my other site as well last year, but I never found the answer. I dont want an accordion.

Thanks!

[TheWasteTransformers]

This reply has been marked as private.

[TheWasteTransformers]

http://prnt.sc/c0u12k

[Nico]

Hi There,

Thanks for writing in.

Rolling out text when clicking the link is quite a customization because it is not part of a post that has excerpt. It would be best to contact a custom developer regarding your customization.

Thank you so much for understanding.

[TheWasteTransformers]

Hi guys,
Maybe I explained it unclear. I just added a picture from your demo website, which I would like to add as well. It would be nice if people first read a short introduction, and after that they can click on ‘Read more’ just as you have showed in your demo.

Any idea how I can incorporate this into my website?
Thanks a lot!

[Thai]

Hi There,

I was unable to login your website.

Could you please double check on your website URL, admin account?

Thanks.

[TheWasteTransformers]

This reply has been marked as private.

[Rad]

Hi there,

You can do it like this, add this content as much as you need.

<div class="toggle-content-wrapper">
<a href="#" class="toggle-handle"><strong>Tell me more</strong></a>
<div class="toggle-content">

Your hidden content should be here

</div>
</div>

Then you can add this code just once to Admin > Appearance > Customizer > Custom > Javascript.

jQuery( function($) {

$('.toggle-content-wrapper .toggle-content').hide().parent().find('.toggle-handle').on('click', function(e) {

e.preventDefault();

$(this).parent().find('.toggle-content').toggle('show');

} );

} );

Hope this helps.

[TheWasteTransformers]

That works great. I added the first codes just in the text and the second code in the Javscript. It works perfect.
Thanks

[Thai]

Glad it worked 🙂

If you need anything else please let us know.

[Author]

Posts