Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

jquery within content area from CMS

Go to End

5 Posts   1912 Views


Community Member, 25 Posts

27 February 2010 at 2:53am


I would like to use something like the jquery accordian in the body of the web page but to be editable from within the CMS. I can use jquery if I manually code this but it would be helpful if others could enter content within the accordian list items from within the CMS.

Any ideas on how to install the jquery item into the body of the page?



Community Member, 545 Posts

27 February 2010 at 10:00am

It really depends on a few factors, the specific jQuery plug-in you're using, as well as the type of data being displayed and the sophistication of you're users.

If its non-page DataObjects you need displayed and you're users are fairly inexperienced at coding, you can always create a separate dataobject using the DataObjectManager module, Make sure each DataObject has a Title and content. That way the title can be your Accordion heading and you could create a stripping function to remove spaces from it and use that ID tags. Then in your template just render that data in appropriate container.

If its Page Data it even easier since you can just use the $URLSegment as your anchor ID and just wrap it in a normal template control like <% control ChildrenOf(x) %>

The main thing is you have to devise way to generate unique IDs for the anchors and content tags. I've done it on few FAQ pages and Press Release Pages


Community Member, 25 Posts

27 February 2010 at 11:27am

Thanks for the prompt reply zenmonkey. I need to get a list of FAQs onto the on-page area of the site so will have to read up on the <% control ChildrenOf(x) %> part. At least I know it can be done, I just need to find a tutorial or some documentation that explains it.

thanks again.


Community Member, 42 Posts

3 March 2010 at 3:12pm

Edited: 03/03/2010 3:16pm


You can use any plugin you want, I've used jcarousel with very good outcomes.

What I'd do:

- create a new DataObject with a Title, Description and $has_one (Image) I'll call this DO "MyImage".
- create a ModelAdmin for this DataObject. (now you can upload images and control them as a DataObject).
- In your page controller create a function to return MyImages.

function MyImages{
   $myimages = DataObject::get('MyImages');
   if($myimages) return $myimages;
   return null;

- now in the front-end you need to add JS files and the script.
- the script should be something like this

<% control MyImages %>
	<% if First %>
	<div id="mainPic" class="big">
		<img id="mainPicture" src="$MyImageUrl"/>
		<h2 id="mainPicTitle">$MyImageTitle</h2>
		<p id="mainPicDesc">$MyImageDescription</p>
	<% end_if %>
<% end_control %>

<ul id="mycarousel" class="jcarousel-skin-tango">
	<% control myImages %>
		<li><img src="$MyImageUrl" width="75" height="75" alt="$MyImageTitle" id="$ID" /></li>
	<% end_control %> 

hope it helps



Community Member, 25 Posts

4 March 2010 at 6:18am

Thanks for the help Carlos, that is very useful. Perhaps we need a tutorial on jquery integration for newbies!

thanks again