Toggle div with jQuery in Display Template

Question

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");
JSRequest.EnsureSetup(); 

// 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>
                </a>
            </div>

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

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

Can someone help me? What I am doing wrong?

UPDATE:

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;
}

Answer 1

I found the solution my self. Thanks everybody.

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

Answer 2

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

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

https://stackoverflow.com/questions/743994/how-do-i-select-an-element-in-jquery-by-using-a-variable-for-the-id

Answer 3

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