jQuery : how to apply effect on a child element
<p>instead of re-writing the same function, I want to optimise my code :</p>

<pre><code>&lt;div class="header"&gt;
    &lt;h3&gt;How to use the widget&lt;/h3&gt;
    &lt;span  id="idwidget" &gt;&lt;/span&gt;
&lt;/div&gt;

&lt;div class="content" id="widget"&gt;
</code></pre>

<p>the JS :</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function() {
        var showText="Show";
        var hideText="Hide";
        $("#idwidget").before(
            "&lt;a href='#' class='button' id='toggle_link'&gt;"+showText+"&lt;/a&gt;"
        );
        $('#widget').hide();
        $('a#toggle_link').click(function() {
            if ($('a#toggle_link').text()==showText) {
                $('a#toggle_link').text(hideText);
            } else {
                $('a#toggle_link').text(showText);
            }
            $('#widget').toggle('slow');
            return false;
        });
    });
&lt;/script&gt;
</code></pre>

<p>This is working just with the div which is called widget and the button called idwidget.</p>

<p>But on this page i have also :</p>

<pre><code>&lt;div class="header"&gt;
    &lt;h3&gt;How to eat APPLES&lt;/h3&gt;
    &lt;span id="IDsomethingelse" &gt;&lt;/span&gt;
&lt;/div&gt;

&lt;div class="content" id="somethingelse"&gt;
</code></pre>

<p>And I want it to be compatible with the code.</p>

<p>I heard about children attribute, do you have an idea how to do that please ?</p>

<p>Thank you</p>
