Expand content with "Read more" link on bottom

Permalink 1 user found helpful
I'm still finding my way around in this clever cms, but my searches so far have not been able to explain me how to do the following.

I would like to have long articles show just the first paragraph of the text, followed by a "Read more" link, but when the link is clicked, I want the content box to expand and show the full article.
The link would still be at the bottom of the article, and if clicked would collapse back to showing only the first paragraph.

The standard "Read more" option in Concrete links to the article page url. I'm looking for something more dynamic.

There are add-ons to expand and collapse content, but they have the button/link on the top instead of the bottom and they switch between no content/all content, instead of switching between 1st paragraph/all content.

I figure this can be done by either loading the extra content on demand with some Ajax magic or loading the full article at the start and then use some JavaScript/JQuery to shorten it to just the first paragraph.

Anyway, I don't yet know how I should tackle this challenge with Concrete. Any ideas or pointers?

(My JavaScript, JQuery and php knowledge is a bit rusty, but I can find my way around again if I need to..)

nio
 
drbiskit replied on at Permalink Reply
drbiskit
I would recommend just using a very simple bit of jQuery loveliness for this:

--

Place this link in your copy:

<p>This is your first paragraph</p>
<a href="#" title="" id="hidden-content-reveal">Click here to reveal content &raquo;</a>

--

Have this element with your hidden content:

<div id="hidden-content">Hidden Content</div>

--

Link to jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>

--

And this is your script:

<script type="text/javascript">
$(document).ready(function() {
$('#hidden-content').hide();
$('#hidden-content-reveal').click(function() {
$('#hidden-content').slideToggle(400);
return false;
});
});
</script>

--
nio replied on at Permalink Reply
nio
Thanks for your reply, that does indeed look very simple.

I think I'll use some code to search for page breaks, which look like "<!-- pagebreak --></p>", and automatically split the article into the hidden content div from there.
Don't know exactly how yet, but I'll figure that out later..)

By the way, doesn't Concrete include the jQuery code by default?
drbiskit replied on at Permalink Reply
drbiskit
Yes, it does - my mistake... I forgot the context I was giving the answer out in.

Cheers.
jordanlev replied on at Permalink Reply
jordanlev
Do you want to do this on the article detail page itself, or in the Page List block that shows many articles?