How to Hide/Show controls in a Repeater Item via a Button-Click in Jquery

Question

Let me try to explain this problem in bullet points for a clear understanding

• I have a Repeater Control which contains a child repeater control (rptChild), a radio buttonList (rblOptions) control and a button (btn) with class (btn btn-info) (along side other nested controls which are not important in this question)
• Assuming the main repeater has multiple items loaded, when the btn is clicked, the rblOptions and the rptChild of the repeater Item where the button was clicked should be hidden or shown. Not all the rblOptions and rptChilds in the entire main repeater.

I was unable to achieve that with this jQuery code below

$(document).ready(function() {
            $('btn.btn-info').click(function() {
                $("[id*=rptChild]").show();
                $("[id*=rblOptions]").hide();
            })
        })

I have been battling with this all night and unable to make it to work as I want it to. Someone please help.

Edit: Sorry I forgot to include this: The Child Repeater has visible to set to false and for some reason the jquery doesn't affect it. But the rblOptions does what is supposed to do but not for a single repeater item but all the repeater Items (I don't want that).

HTML

<div class="list-group">

        <asp:RadioButtonList runat="server" ID="rblOptions" DataSourceID="PollAnswersDataSource1"
            DataTextField="PollAnswerText" DataValueField="PollAnswerID" CssClass="radio-inline">
        </asp:RadioButtonList>
        <br />
        <asp:Repeater ID="rptChild" runat="server" DataSourceID="PollAnswersDataSource1"
            Visible="false">
            <HeaderTemplate>
                <div>
                    <h4 class="panel-title">
                        <span class="glyphicon glyphicon-stats"></span>&nbsp;<b>Poll Results</b>
                    </h4>
                </div>
                <br />
            </HeaderTemplate>
            <ItemTemplate>
                <div class="list-group-item">
                    <div>
                        <asp:RadioButton ID="rbAnswer" runat="server" Text='<%#Eval("PollAnswerText") %>'
                            Enabled="false" Checked='<%# IsUserSelectedAnswer(Eval("PollQuestionID"), Eval("PollAnswerID")) %>' />
                    </div>
                    <div class="progress progress-striped active">
                        <div class='<%# GetValue(Eval("PollQuestionID"), Eval("PollAnswerID"))%>' role="progressbar"
                            aria-valuenow='<%# GetValuePercent(Eval("PollQuestionID"), Eval("PollAnswerID")).Replace("%","") %>'
                            aria-valuemin="0" aria-valuemax="100" style='width: <%# GetValuePercent(Eval("PollQuestionID"), Eval("PollAnswerID")) %>'>
                            <%# GetValuePercent(Eval("PollQuestionID"), Eval("PollAnswerID")) %>
                        </div>
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>
        <cc2:PollAnswersDataSource ID="PollAnswersDataSource1" runat="server" SelectMethod="GetByPollQuestionId">
            <DeepLoadProperties Method="IncludeChildren" Recursive="False">
            </DeepLoadProperties>
            <Parameters>
                <asp:ControlParameter ControlID="lblQuestionID" Name="PollQuestionID" PropertyName="Text" />
                <cc2:CustomParameter Name="OrderBy" Value="DateCreated DESC" />
            </Parameters>
        </cc2:PollAnswersDataSource>
    </div>
    <div class="media-body">
        <span class="text-muted pull-left"><em>
            <%#GetExpiryDays(Eval("PollQuestionID"))%></em></span> <span class="text-muted pull-right">
                <em>
                    <%#GetHitCount(Eval("PollQuestionID"))%></em></span>
    </div>
</div>
<div class="panel-footer" id="div_Vote" runat="server">
    <asp:Button ID="btn" runat="server" Text="Vote" CssClass="btn btn-info" /><br />
</div>

Sorry the main repeater is huge which makes me to only take the part related to this question to avoid confusion.

Answer 1

Note: When you set Visible to false in an ASP.net control, it is not rendered. That means there is no HTML representation of that control to manipulate with jQuery. Instead of Visible="false" on the Repeater you could set the CSSClass="hide" which is a Bootstrap Class that sets "display:none" then this should work:

 $('.btn.btn-info').click(function() {
   var listGroup=$(this).parent( '.panel-footer' ).prev();// prev() will select the previous sibling of .panel-footer which will be .list-group 
   listGroup.children('.radio-inline').hide(); //Which is ID rblOptions
   listGroup.children('.hide').show(); //Which is ID rptChild
 })

Answer 2

Probably you have the wrong selector btn.

Either you are mistaken it with .btn.btn-info or button.btn-info

$(document).ready(function() {
    $('.btn.btn-info').click(function() {
        $("[id*=ChildRepeater]").show();
        $("[id*=rblOptions]").hide();
    })
})