- This topic has 13 replies, 2 voices, and was last updated 4 years, 1 month ago by Tom.
-
AuthorPosts
-
February 16, 2020 at 4:45 am #1166916generatepressuser
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 #1167337TomLead 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 π
February 16, 2020 at 12:20 pm #1167422generatepressuserHello,
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 #1167576TomLead 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 π
February 18, 2020 at 10:02 am #1169452generatepressuserHello
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 #1169849TomLead 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.
February 22, 2020 at 6:26 pm #1173991generatepressuserHello,
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 #1174489TomLead DeveloperLead DeveloperHi there,
It looks like it’s working for me. Maybe try clearing your browser cache?
Let me know π
February 23, 2020 at 8:57 am #1174494generatepressuserHello,
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 #1174763TomLead DeveloperLead DeveloperWordPress requires
jQuery
instead of$
.Glad it’s working π
February 28, 2020 at 6:19 am #1179537generatepressuserHello,
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 #1179868TomLead DeveloperLead DeveloperI just adjusted the javascript to do that: https://generatepress.com/forums/topic/toggle-text/#post-1167576
February 28, 2020 at 1:10 pm #1180045generatepressuserThats perfect, thank you!
Best regards!February 29, 2020 at 12:12 am #1180265TomLead DeveloperLead DeveloperYou’re welcome π
-
AuthorPosts
- You must be logged in to reply to this topic.