toggle text

[generatepressuser]

Hello,

I have a list of text (titles with bold font and below each title, 2-3 lines of text)

Is it possible to only view the title (bold text) and only if a user clicks on the bold text, the further text appearing below the bold text?

best regards

[Tom]

Hi there,

Something like this would require custom javascript.

You may want to look into a plugin to achieve this. If you’re comfortable adding HTML and javascript, I may be able to point you in the right direction code-wise.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[generatepressuser]

Hello,

It depends how complicated it is, tried testing once but never tried with wordpress, not sure how to implement into my already existing site.

If its not too much work I would like to do it 🙂

best regards

[Tom]

As a quick example, you could do this:

<h3 class="toggle-heading">Toggle me!</h3>
<div class="toggle-text">
    Your text
</div>

<h3 class="toggle-heading">Toggle me again!</h3>
<div class="toggle-text">
    Your additional text
</div>

Then add this CSS:

.toggle-text {
    display: none;
}

.toggle-text.show-text {
    display: block;
}

Then add this jQuery:

jQuery( '.toggle-heading' ).on( 'click', function( e ) {
    e.preventDefault();

    $( '.toggle-text' ).removeClass( 'show-text' );
    $( this ).next( '.toggle-text' ).toggleClass( 'show-text' );
} );

That should get you started 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[generatepressuser]

Hello

Thank you for that idea!
I know how to add css, but never did with javascript and html into wordpess.

At the moment, on the page the lines are like this:
<p> <strong title <br> text <br> text </p>

Regarding your exmample, I would have to change it to h3 and div.

Which way would you recommend me to add HTML and Javascript into my page, with a plugin? If yes, is there a reliable one?

Best regards

[Tom]

I would add the HTML using an HTML block in the editor.

As for the JS, you could use a Hook Element:

1. Add a new Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to wp_footer
3. Add your content:

<script>
    // Your javascript in here.
</script>

4. Set the Display Rules.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[generatepressuser]

Hello,

Thank you for the code, I have put the HTML, the CSS and also the JS script as wp_footer Element with display rule for that specific page. But when clicking on h3 text, the div is not showing. Is there maybe a typing error in the jquery script?

Best regards

[Tom]

Hi there,

It looks like it’s working for me. Maybe try clearing your browser cache?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[generatepressuser]

Hello,

Strange, I did so and restartet but never worked, but now I have replaced $ with jQuery and it works.
I just googled a bit and tried, thank you anyways for the code, I guess its browser depended, hopefully it works now with “jQuery” instead of $ stable ^^

best regards!

[Tom]

WordPress requires jQuery instead of $.

Glad it’s working 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[generatepressuser]

Hello,

Now one can open several h3 at the same time.
Is it possible that only one h3 can be open at one time?

Just wondering, since it would look more professional if only one can be open.

Best regards

[Tom]

I just adjusted the javascript to do that: https://generatepress.com/forums/topic/toggle-text/#post-1167576

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[generatepressuser]

Thats perfect, thank you!
Best regards!

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts