Hide projection-content with jQuery

Topics: Customizing Orchard
Jul 31, 2012 at 1:09 PM

I have a projection and query so users can add Question and Answer items in the backend.

I want to write some jQuery code so the body of the items is hidden until you click on the title.

Here is an example: http://www.ksavksjzele.be/kwamkwammer/

 

I have this piece of code:


<script>
    $(document).ready(function () {
    // used to show already the first item's body
        $("a:first").trigger('click');
    // when you click on a link, content is shown in 'NewsDisplay' div
        $("a").click(function (event) {
            $('#NewsDisplay').hide().html(
               $(this).next('.laatsteNieuws').html()
            ).slideDown('slow');
        });
    });
</script>

 

and it works fine for a simple html file. The problem with the projections in Orchard is that the html is rendered by Orchard so I tried using Firebug to search for the ellements that I need, but the code is not working.

 

Does somebody have a clue how to fix this?

 

Developer
Jul 31, 2012 at 2:01 PM

You could override the rendered html using alternates. Or, you could modify that script to reference the correct elements. Or a combination of both.

Jul 31, 2012 at 2:12 PM

The script in my post is already with the correct element-names that I found with firebug.

I also use alternates.

I will continue searching :)