I am building a display template in sp2013. I have a control template and a item template. In the item template I have some mapped properties.

I show a list with titles. When you click on the title there is a jquery toggle function which is showing a div below the title. This works.

Now I have a querystring in the url with an id. I have some logic that the item in the list where the div id is equal to the querystring value will toggle. So this item will automatically opened.

Here is an example of my code:

var listItemID = $getItemValue(ctx, "ListItemID");

// query string
itemId = JSRequest.QueryString["standpuntID"];

// div id
var uniqueDivId = listItemID;

        <div class="vbrStandPuntDetailItem " id="_#= containerId =#_"  name="_#=category=#_">
            <div class="standPuntItemHeader">
                <a class="" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= pictureLinkId =#_" onclick="jQuery('#_#= uniqueDivId =#_').toggle();">
                    <h1>_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_</h1>

            <div class="standPuntDetailItemContent" id="_#= uniqueDivId =#_" >

    if(uniqueDivId.value == itemId)
      // here I would like to have some logic to show this div with this id

Can someone help me? What I am doing wrong?


This is the css class on the hided divs:

.standPuntDetailItemContent {
    display: none;
    margin: 0 0 1px 0;
    padding: 0 0 0 70px;
    text-align: left !important;
  • Why do not use hide/show instead of toogle? – Nk SP Apr 16 '14 at 15:17
  • I would like to show the div on click and hide the div when I click again. Thats the toggle function. – Ola Apr 16 '14 at 15:56

I found the solution my self. Thanks everybody.

AddPostRenderCallback(ctx, function()
    if(uniqueDivId.value == itemId)
      $('#' + itemId).show();

I think you are missing the "#" sign, that jQuery needs to interpret uniqueDivId as an id.

jQuery('#' + uniqueDivId.value).toggle();


  • This is not working. Maybe this code is running to earlier. Is there some option to load this logic at the end of page render? – Ola Apr 16 '14 at 15:52

You can use $("#yourID").show() and $("#yourID").hide().
Simple Hide JSFiddle

  • this is also not working. – Ola Apr 16 '14 at 15:56
  • @KHA update jsfiddle – Nk SP Apr 16 '14 at 16:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.