- This topic has 13 replies, 2 voices, and was last updated 2 years, 11 months ago by
Tom.
-
AuthorPosts
-
February 16, 2020 at 4:45 am #1166916
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
February 16, 2020 at 10:02 am #1167337Tom
Lead DeveloperLead DeveloperHi 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-developmentFebruary 16, 2020 at 12:20 pm #1167422generatepressuser
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
February 16, 2020 at 7:47 pm #1167576Tom
Lead DeveloperLead DeveloperAs 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-developmentFebruary 18, 2020 at 10:02 am #1169452generatepressuser
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
February 18, 2020 at 7:47 pm #1169849Tom
Lead DeveloperLead DeveloperI 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 towp_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-developmentFebruary 22, 2020 at 6:26 pm #1173991generatepressuser
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
February 23, 2020 at 8:52 am #1174489Tom
Lead DeveloperLead DeveloperHi 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-developmentFebruary 23, 2020 at 8:57 am #1174494generatepressuser
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!
February 23, 2020 at 6:04 pm #1174763Tom
Lead DeveloperLead DeveloperWordPress 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-developmentFebruary 28, 2020 at 6:19 am #1179537generatepressuser
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
February 28, 2020 at 9:11 am #1179868Tom
Lead DeveloperLead DeveloperI 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-developmentFebruary 28, 2020 at 1:10 pm #1180045generatepressuser
Thats perfect, thank you!
Best regards!February 29, 2020 at 12:12 am #1180265Tom
Lead DeveloperLead DeveloperYou’re welcome π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.