jQuery : how to apply effect on a child element

Hello, instead of re-writing 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;
        });
    });
</script>

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

From stackoverflow

• Based on your example snippets of HTML, the following should work (it grabs the all .content divs and works backwards to find the associated span):

  <script type="text/javascript">
      $(document).ready(function() {
          var showText="Show";
          var hideText="Hide";
          $(".content").each(function() {
              var $content = $(this).hide();
              $("<a href='#' class='button' >"+showText+"</a>")
                  .insertBefore($("#id" + $content.attr("id")))
                  .click(function() {
                      if ($(this).text() == showText) {
                          $(this).text(hideText);
                      } else {
                          $(this).text(showText);
                      }
                      $content.toggle('slow');
                      return false;
                   });
          });
      });
  </script>
  

  Edit: I've compacted the code a little (but it now requires jQuery 1.4 for the .text(function) bit).

  Edit 2: Ok still more compact than the original, but back to 1.3.X safe code.

  gryzzly : what you can achieve by doing "$content = $(this).hide();"? does .hide() method also return something?

  Alconja : @gryzzly - most functions in jQuery return the object you're manipulating so that you can chain things together... So `var $content = $(this).hide();` is the same as `var $content = $(this); $content.hide();`. So just making the code a little more compact.

  Tristan : Thank you, it's perfect ! ;) 15char

  Tristan : @alconja in the show/hide button, when clicking on SHOW, instead of showing 'HIDE' it's showing : function(idx,text) {return text == showText:showText; }

  Alconja : @Tristan - what version of jQuery are you using? I'm guessing its 1.3.X (the `.text(function)` syntax is new to 1.4), since it looks like its setting the text to the literal function... I'll switch it back to 1.3 safe code.

  Tristan : yes, indeed i'm using 1.3.x in this part of the website. There is no bigdeal, i'm gonna update to 1.4.2. Sry, i forgot i had 2 different version on the website. Thanks again ;)

  Tristan : definitly works and the code is beautiful ;)

  Alconja : @Tristan - No worries. Glad to help. If you (or anyone else who comes looking in the future) wants the 1.4 version, you can [grab it from the revision history](http://stackoverflow.com/revisions/b947c1d8-fa78-4b8f-854b-e60119b8f44b/view-source).