Creating a read more/hide text toggle

[Helene25]

I've been trying to figure out how to create a toggle (and please forgive me if I'm using incorrect jargon) so that readers can see the first paragraph or so of text and then if they want to read on, they hit a "read more" toggle button that will open the rest of the text on that page. They can also hit the same button to hide the text, if they don't want to see it on the page, although that's not as important as the read more bit.

I know there's a "read more" button on the page editor, so maybe it's just that I don't know how to use it properly.

I've installed the Collapse-O-Matic plugin, but it's too technical for me, so I'm thinking of uninstalling it.

I'd like to put the read more toggle button/arrow/text after where I've said "hit the button below..." I'm still editing the content of this page, and it'll be influenced by whether I can do this button thing or not 😉

Appreciate any help you can offer.
Helene

http://www.musicallyspeakingvic.com.au/your-hands/

[William]

jQuery(function( $ ){

	var question = $('.faq .question');
	var answer = $('.faq div');
	 
	$( answer ).hide();
	 
	$( question ).click( function() {
	 
		$(this).find('span').toggleClass( "open" );
		$(this).next().slideToggle(200);
	 
	 
	});

});

With the following HTML:

<div class="faq">
<p class="question">Heading Goes Here <span class="open"></span></p>
<div style="display: none;">Content goes here...</div>
</div>

Something among those lines 🙂

There are quite a few examples on Stackoverflow as well:
https://stackoverflow.com/questions/25341429/jquery-read-more-read-less-how-to-replace-text

---

Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !

[Helene25]

Thanks so much William. Unfortunately I don't know where to put all this code. Does it go on the page itself?

[Author]

Posts