How do I get the name attribute of a hidden element within a div using jQuery?

Question

I have a nested grid with is inside a 'div' element. I have a hidden element to determine if the div is expanded or not. I need to get the name of the hidden element (uniqueID) to set it. The jquery to open/close the grid is below:

function DivExpandCollapse(RecipientID) {
        var div = document.getElementById(RecipientID);
        var img = document.getElementById('img' + RecipientID);
        var hiddenID = //div + ?? to ID the hidden element
        var hiddenElement = document.getElementById(?????);

        if (div.style.display == "none") {
            div.style.display = "inline";
            img.src = "Images/minus.png";
            //Setting the hidden element to 'expanded'
            hiddenElement.val("1");
        }
        else {
            div.style.display = "none";
            img.src = "Images/plus.png";
           //Use ID of hidden element to set to 'hide'
           hiddenElement.val("");
        }
    }

The div ID is defined in the markup:

<tr><td colspan="100%">                  
 <div id="div<%# Eval("RecipientID") %>" style="display:none"> 
     <asp:HiddenField ID="recdevgvIsExpanded" runat="server" ClientIDMode="Static"/>
 </div>       
 </td></tr>  

Answer 1

you can use attribute selector in jquery

https://api.jquery.com/attribute-equals-selector/

your jquery selector will be like:

$('[style="display:none"]')

but if there is any inline styles with the display it will not select the element

Answer 2

"I need the hidden element to keep track of which grids are open". Perhaps you can try this:

1. Add an additional CssClass in your <asp>
2. Filter it using jQuery

 $('.getThisID').click(function() { var elem = $(this).find('.getMyID'); var id = $(elem).attr('id'); console.log(id); // Tadaaa, your ID here // Then you can style $(this), either to display:inline, or create an additional img and set the img src }); 

 <tr> <td colspan="100%"> <div id="div_<%# Eval("RecipientID") %>" class="getThisID" style="display:none"> <asp:HiddenField ID="recdevgvIsExpanded" runat="server" ClientIDMode="Static" CssClass="getMyID"/> </div> </td> </tr> 

Answer 3

Without using jQuery you can do this:

var hiddenElement = document.getElementById(RecipientID).getElementsByTagName('input')[0];

Asp:HiddenField renders as a

inputp[type=hiudden]