Question

I have the following script —

   $(document).ready(function () {

    $("div.settings_frame_tabs_frame").(function () {

        $("div.settings_frame_tabs_heading" ,this).click(function () {

            $("div.settings_frame_tabs_content" ,this).animate({
              height : 'toggle'
            }, 400, 'linear', function() { });

        });

    });

  });

And following HTML code —

  <div id="settings_frame_email_id_update" class="settings_frame_tabs_frame">
    <div class="settings_frame_tabs_heading">Email ID</div>
    <div class="settings_frame_tabs_content">
          <form action="<?php echo PATH; ?>domail_res/scripts/php/functions/settings_func.php?update=email_id" method="POST">
                 <table width="100%">
                         <tbody>
                                 <tr>
                                      <td align="left" width="35%">
                                           Enter your new <b>Email ID</b>
                                      </td>
                                      <td align="left">
                                           <input type="textbox" class="settings_frame_tabs_textbox" name="settings_email_id" />
                                      </td>
                                 </tr>
                                 <tr>
                                      <td></td>
                                      <td align="right">
                                           <input type="submit" class="settings_frame_tabs_submit_btn" value="Update" />
                                      </td>
                                 </tr>
                         </tbody>
                 </table>
          </form>
    </div>

Here is the link of the Jsfiddle with CSS.
http://jsfiddle.net/EDxWh/
Anyone have any ideas! Please let me know if you got any ideas with you, please.

Thanks in advance!

http://jsfiddle.net/ye6tX/ -> With the JS/HTML

Answer 1

Syntax error…. the console should have told you that:

 $("div.settings_frame_tabs_frame").(function () {
 //                          -------^

Here you go:

$("div.settings_frame_tabs_frame").each(function () {
    $("div.settings_frame_tabs_heading", this).click(function () {
        $(this).next("div.settings_frame_tabs_content").animate({
          height : 'toggle'
        }, 400, 'linear');
    });
});

each might not be necessary, depending on how many .settings_frame_tabs_frame elements exist. You could also do:

 $("div.settings_frame_tabs_frame div.settings_frame_tabs_heading")
     .click(function () {...});

The other problem was that div.settings_frame_tabs_content is not a child of div.settings_frame_tabs_heading but a sibling, hence you have to use $(this).next().

Working DEMO