Databases
StackOverflow2013
Postsdbo
POUsing JQuery For Expand/Collapse in an ASP .NET Page with a Repeater Control
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing JQuery For Expand/Collapse in an ASP .NET Page with a Repeater Control
    primarykey
    data
    text
    <p>My ASP .NET page contains a repeater control. Here is the HTML of interest. Note we have some custom controls in here, but I don't think that's important to my question.</p> <pre><code>&lt;table style="border: 0px;" cellpadding="0" cellspacing="0"&gt; &lt;tr&gt; &lt;td style="width: 150px;"&gt; &lt;b&gt;Topic&lt;/b&gt; &lt;/td&gt; &lt;td style="width: 250px; padding-right:10px;"&gt; &lt;b&gt;Score&lt;/b&gt; &lt;/td&gt; &lt;/tr&gt; &lt;asp:Repeater ID="_prvCtlRepeaterSurveyTopics" runat="server"&gt; &lt;ItemTemplate&gt; &lt;tr&gt; &lt;td style="width: 35%;"&gt; &lt;div id="ClickToExplandDiv"&gt; &lt;img id="_prvCtlImagePlusMinus" runat="server" alt="Expand/Collapse" src="" class="PlusMinus" /&gt; &lt;customtagprefix:ctlEncodedLabel id="_prvCtlEncodedLabelTopicText" runat="server" CssClass="ECLink" /&gt; &lt;/div&gt; &lt;/td&gt; &lt;td style="width: 30%;"&gt; &lt;img id="_prvCtlImageTopic" runat="server" src="" alt="Score" /&gt; &lt;/td&gt; &lt;td style="width: 35%; white-space: nowrap;"&gt; &lt;customtagprefix:ctlEncodedLabel id="_prvCtlLabelTopic" runat="server" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="padding: 3px 15px; width: 400px;" colspan="3"&gt; &lt;div id="ExplandODiv"&gt; &lt;customtagprefix:ctlRoundedGrayHeader id="_prvCtlRoundedGrayHeaderCF" runat="server" /&gt; &lt;customtagprefix:ctlSummeryResultsList ID="_prvCtlSummaryResultsList" runat="server" /&gt; &lt;customtagprefix:ctlRoundedGrayFooter id="_prvCtlRoundedGrayFooterCF" runat="server"/&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/ItemTemplate&gt; &lt;/asp:Repeater&gt; &lt;/table&gt; </code></pre> <p>I want to be able to click on the DIV created by this code:</p> <pre><code>&lt;div id="ClickToExplandDiv"&gt; &lt;img id="_prvCtlImagePlusMinus" runat="server" alt="Expand/Collapse" src="" class="PlusMinus" /&gt; &lt;customtagprefix:ctlEncodedLabel id="_prvCtlEncodedLabelTopicText" runat="server" CssClass="ECLink" /&gt; &lt;/div&gt; </code></pre> <p>and have the information displayed in this segment either expand or collapse:</p> <pre><code> &lt;td style="padding: 3px 15px; width: 400px;" colspan="3"&gt; &lt;div id="ExplandODiv"&gt; &lt;ayco:ctlRoundedGrayHeader id="_prvCtlRoundedGrayHeaderCF" runat="server" /&gt; &lt;ayco:ctlSummeryResultsList ID="_prvCtlSummaryResultsList" runat="server" /&gt; &lt;ayco:ctlRoundedGrayFooter id="_prvCtlRoundedGrayFooterCF" runat="server"/&gt; &lt;/div&gt; &lt;/td&gt; </code></pre> <p>I am at a loss for the JQuery for this. Right now, I have the following which successfully hides all of the DIVs I want initially hidden and then opens just the first hidden DIV, no matter which of the expand-link DIV's I click.</p> <pre><code>&lt;script type="text/javascript"&gt; var isInitialized = false; $(document).ready(function() { if (!isInitialized) { $('[id=ExplandODiv]').hide(); isInitialized = true; } $('div[id=ClickToExplandDiv]').click(function() { $('#ExplandODiv:first-child').toggle(); }); }); &lt;/script&gt; </code></pre> <p>One way I can think to work around this would be to assign a "bogus class" to the elements as I run through them in the <code>ItemDatabound(...)</code> event. However, I am thinking that I should be able to use some sort of CSS selector that would select the appropriate DIV under the link I click. Maybe some derivitive of the "this" object, but I'm having a difficult time figuring this out.</p> <p>I would appreciate any help you can provide on this. Thanks.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmattytommo
    1. USDan7el
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload