Hello, instead of re-writting the same function, i want to optimise my code :

<div class="header">
    <h3>How to use the widget</h3>
    <span  id="idwidget" ></span>
</div>

<div class="content" id="widget">

the JS :

<script type="text/javascript">
    $(document).ready(function() {


    var showText="Show";
    var hideText="Hide";


    $("#idwidget").before("<a href='#' class='button' id='toggle_link'>"+showText+"</a>");


    $('#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;
        });

    });

This is working just with the div which is called widget and the button called idwidget.

But on this page i have also :

<div class="header">
    <h3>How to eat APPLES</h3>
    <span  id="IDsomethingelse" ></span>
</div>

<div class="content" id="somethingelse">

And i want it to be compatible with the code.

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

Thank you