Display content from list in div underneath

Topics: Customizing Orchard, Writing themes
Dec 19, 2013 at 2:48 PM
Hey everyone,

I have a projection from which I only show the titles.

Now if you click on one of the items in the list I want to display the content item in a div underneath it. (or in the after content)

What would be the easiest way to do this?

Dec 27, 2013 at 11:42 AM

Happy holidays! :)
Dec 27, 2013 at 12:23 PM
Edited Dec 27, 2013 at 12:24 PM
You could easily do this by adding a Shape layout to your Query and use that in your Projection. Next, create a Razor file for the shape name you specified in the Shape Layout. The shape will have a ContentItems property, which you can use to render the list you want, including a hidden div underneath each item, which you show when you click an item.

Happy Holidays!
Jan 5, 2014 at 5:39 PM

Thanks for your answer, I've never used this feature, When I add a shape layout to the query:

For the shape options, which shape type do I select?

For properties, there are the "add new property" options, do I need to select all my fields and parts there?

I'm sorry, I'm kinda confused on how all this works.

Is there a tutorial on this somewhere?

Jan 5, 2014 at 5:51 PM

To give you another example: TEXT

This is a site I made in 1.6, i just render a complete list and then do the actual layout with jquery, of course this is a much more simple example because I only have a title and a body.

Now I want to do exactly the same but with a list of team members (they have a body text, title, picture, email address etc...)

Jan 6, 2014 at 12:36 AM
Ouch. I can see nothing on that site that couldn't or shouldn't be styled with CSS.
Jan 6, 2014 at 7:35 AM
This was 2 years ago, a lot has changed since then (including my knowledge) :)

So what about the shape layout? :)
Jan 6, 2014 at 1:11 PM
I was just thinking, Wouldn't it be easier to create a list of just the titles.

Then when you click on a title show the content item in a div beneath the list?

when you click on an item now it goes to Contents/Item/Display/15 for example

How can you alter the @Html.ItemsDisplayLink(title, contentItem) to not show it in a new windows but in a div?

Jan 10, 2014 at 2:13 PM
Ok, I've done it with jquery again, running out of time and don't know how to implement the shape layouts...

If anyone's interested here is the jquery code:
@using (Script.Foot())
    <script type="text/javascript">
        $(function () {
            var menu = $('<ul id="menuMedewerker"/>').appendTo('#Medewerker_Menu'),
            lis = $('#Medewerker_List li').each(function () {
                var titel = $(this).find('h3').text()
                var li = $(this).hide(),
                newLi = "<li>" +
                titel +
                $(newLi).appendTo(menu).click(function () {
I create a new menu inside a div "Medewerker_Menu" in my view.
I gave my query a list Id "Medewerker_List"
The titles of my content Items inside the list are all h3's

Marked as answer by borrierulez on 1/10/2014 at 7:13 AM