How do I create a read more / read less button with getResources or Ditto

Hello everyone,

I’m building a site for a client at the moment (haven’t decided whether to use MODx revo or evo yet but both will do the trick so It’s just down to this really).

One of the pages has a list of people who work for the company that needs to be updatable. I’ve decided to do this using either the ditto plugin (if we go with evo) or the getResources plugin (if we use Revo). They need to be able to update the team and they have no coding knowledge so I thought it would be easier to setup template variables for the layout.

The only part that is slightly ’complicated’ is that the design has a ’read more’ button on it. Rather than loading a new page (as theres only going to be two paragraphs for each person), we would like this to be powered by JQuery. Ideally, when the page is loaded, each ’team member’ will have one paragraph of text, when the ’read more’ button is clicked underneath, this will reveal the second paragraph of text. The ’read more’ text should then change to ’read less’ and when ’read less’ is pressed, all the content but the initial content dissapears.

I assume this would work by putting the initial content in one TV and the additional content in another TV. When the ’read more’ button is clicked, the additional content is loaded in. I’m unsure as to how I can implement this though. I’m not sure if there is already a plugin for this or whether something will need to be written.

Any help would be fantastic!

Kind Regards
Lewis

depends on how much extra content there is, you may just want to load the whole page and hide all the paragraphs you don't want to show initially? The load time may be quite quick and then it's a simple toggle via jquery, you could add some animation if you like and then also change the text of your link, and class of it (say you wanted to display a different icon for open and closed paragraphs)

I have done this using Evo, since QuickManager allows for Ditto content to contain an edit button for each Ditto item.

I have a section in my Resource Tree for "people", and each employee has his bio there, with a TV for a photo, and a few radio button and check box TVs to indicate the employee's status.

The Ditto tpl uses the pagetitle (person's name), the content, and the photo, and a couple of PHx conditionals to indicate status depending on the radio buttons and checkboxes. It also has the QM trigger next to the tag for the person's name. When the user is a logged-in Manager user, he gets an Edit button next to each name.



I use a JQuery plugin to create the accordion (there are lots of these; you can choose your favorite), showing and hiding the bio/photo when the name is clicked on.

I've also added a custom main menu item to QM to create a new employee, specifying the same parent and template for the new employee.



This way the client can add/edit his people without having to navigate through the Manager. His Manager login redirects him to the front-end.

The site is in four languages, so I'm using YAMS, which makes things very easy with each page having four extra tabs, one for each language, so everything can be edited on the same page.