Toggle div within a div using an image
<p>I have the following code currently:</p>

<pre><code>$(document).ready(function () {
    $(function () {
        $('#toggleinput').click(function () {
            $('[id^=POPUP]').toggle()
        });
        $(".img-swap").on('click', function () {
            if ($(this).attr("class") == "img-swap") {
                this.src = this.src.replace("_showall", "_hideall");
            } else {
                this.src = this.src.replace("_hideall", "_showall")
            }
            $(this).toggleClass("on");
        });
    });
});
</code></pre>

<p>I have a div called <code>div id="input"</code> and within that there are an assortment (from 3-50+) other divs that called <code>div id="POPUP{Some number}"</code>.</p>

<p>So I have this:</p>

<pre><code>&lt;div id="input"&gt;
    &lt;div id="POPUP438748234793"&gt;&lt;/div&gt;
    &lt;div id="POPUP437857482782"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>What I want to do is to only toggle those POPUP divs that are within the "input" div. There will be another div called "Response" that will also have POPUP divs. So I want to use this code in two places with a different parent div. Right now, the code above toggles <em>ALL</em> the POPUP divs and not just the ones under input. How do I do that?</p>

<p>I'm new to JQuery, but I think it's really great thus far!</p>

<p><strong>EDIT</strong>
Oddly enough, none of these seem to be working. Perhaps I'm missing something or I haven't given you everything to help with this issue (probably the latter). Below is part of the html from the output I produce (I'm doing this in a separate application, so some of the code you see you may be wondering why it's even there, but because of the setup, I can't really change it (and don't want to take the hours it would take to do mass modifications each time a change is made)).</p>

<pre><code>&lt;div id="input"&gt;
    &lt;div&gt;
&lt;ul style="list-style: disc;"&gt;
    &lt;li class="Input1-Bullet"&gt;&lt;p class="Input-Bullet"&gt;&lt;a class="dropspot" href="javascript:TextPopup(this)" id="a3"&gt;merchantId&lt;/a&gt;&lt;/p&gt;
    &lt;div class="droptext" id="POPUP581417197" style="display: none;"&gt;
        &lt;p class="Body1-Text"&gt;Logical Definition: This is the general definition of what the input type is in common terms.&lt;/p&gt;
        &lt;p class="Body1-Text"&gt;Technical Definition: This is the technical        definition of what the input type is; for example, it is the data stored in the X column 
     of the Y table.&lt;/p&gt;
        &lt;p class="Body1-Text"&gt;Required: Y/N&lt;/p&gt;
        &lt;p class="Body1-Text"&gt;Input Information: varchar 32, etc.&lt;/p&gt;
    &lt;/div&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>That extra <code>&lt;div&gt;</code> tag is added by the application when it creates the output html file. I can't really stop it, and editing it out would take more time and be problematic in the long run. Essentially, the line with <code>merchantId</code> would be visible. It can be clicked to display the information in the div (POPUP) below. I want to display all these POPUP divs with a single button at the top so long as they are within the <code>input</code> div.</p>

<p><strong>EDIT 2</strong>
My mistake. I found the error in that I didn't have my image called <code>toggleinput</code>. I have it working now.</p>
