jQuery - Accordion Effect on a Table 3

Question

I have a little trouble customizing this code, I try to make an accordion table with scrolling effect, I did with some codes via a tutorial, when I click on the header two tables close. I just need to keep one open and one closed.

here is a demo http://jsfiddle.net/cdvfn/4/

Here the script //accordion

$( '.tablescroll_head' ).click(function() {
  $( '.tablescroll_wrapper').slideUp()
    .toggle();
});

here my html

<table id="thetable" cellspacing="0">
  <thead>
    <tr>
      <td>city</td>
      <td>state code</td>
      <td>zip</td>
      <td>latitude</td>
      <td>longitude</td>
      <td>county</td>
    </tr>
    <tr>

    </tr>
  </thead>
  <tbody>
    <tr class="first">
      <td>Holtsville</td>
      <td>NY</td>
      <td>00501</td>
      <td>40.8152</td>
      <td>-73.0455</td>
      <td>Suffolk</td>
    </tr>
    <tr>
      <td>Holtsville</td>
      <td>NY</td>
      <td>00544</td>
      <td>40.8152</td>
      <td>-73.0455</td>
      <td>Suffolk</td>
    </tr>
    <tr>
      <td>Adjuntas</td>
      <td>PR</td>
      <td>00601</td>
      <td>18.1788</td>
      <td>-66.7516</td>
      <td>Adjuntas</td>
    </tr>
    <tr>
      <td>Aguada</td>
      <td>PR</td>
      <td>00602</td>
      <td>18.381389</td>
      <td>-67.188611</td>
      <td>Aguada</td>
    </tr>
    <tr>
      <td>Aguadilla</td>
      <td>PR</td>
      <td>00603</td>
      <td>18.4554</td>
      <td>-67.1308</td>
      <td>Aguadilla</td>
    </tr>
    <tr>
      <td>Aguadilla</td>
      <td>PR</td>
      <td>00604</td>
      <td>18.4812</td>
      <td>-67.1467</td>
      <td>Aguadilla</td>
    </tr>
    <tr>
      <td>Aguadilla</td>
      <td>PR</td>
      <td>00605</td>
      <td>18.429444</td>
      <td>-67.154444</td>
      <td>Aguadilla</td>
    </tr>
    <tr>
      <td>Maricao</td>
      <td>PR</td>
      <td>00606</td>
      <td>18.182778</td>
      <td>-66.980278</td>
      <td>Maricao</td>
    </tr>
    <tr>
      <td>Anasco</td>
      <td>PR</td>
      <td>00610</td>
      <td>18.284722</td>
      <td>-67.14</td>
      <td>Anasco</td>
    </tr>
    <tr>
      <td>Angeles</td>
      <td>PR</td>
      <td>00611</td>
      <td>18.286944</td>
      <td>-66.799722</td>
      <td>Utuado</td>
    </tr>
    <tr>
      <td>Arecibo</td>
      <td>PR</td>
      <td>00612</td>
      <td>18.4389</td>
      <td>-66.6924</td>
      <td>Arecibo</td>
    </tr>
    <tr>
      <td>Arecibo</td>
      <td>PR</td>
      <td>00613</td>
      <td>18.1399</td>
      <td>-66.6344</td>
      <td>Arecibo</td>
    </tr>
    <tr>
      <td>Arecibo</td>
      <td>PR</td>
      <td>00614</td>
      <td>18.1399</td>
      <td>-66.6344</td>
      <td>Arecibo</td>
    </tr>
    <tr>
      <td>Bajadero</td>
      <td>PR</td>
      <td>00616</td>
      <td>18.428611</td>
      <td>-66.683611</td>
      <td>Arecibo</td>
    </tr>
    <tr>
      <td>Barceloneta</td>
      <td>PR</td>
      <td>00617</td>
      <td>18.4525</td>
      <td>-66.538889</td>
      <td>Barceloneta</td>
    </tr>
  </tbody>
  </table>






<table id="theable" cellspacing="0">
  <thead>
    <tr>
      <td>city</td>
      <td>state code</td>
      <td>zip</td>
      <td>latitude</td>
      <td>longitude</td>
      <td>county</td>
    </tr>
    <tr>

    </tr>
  </thead>
  <tbody>
    <tr class="first">
      <td>Holtsville</td>
      <td>NY</td>
      <td>00501</td>
      <td>40.8152</td>
      <td>-73.0455</td>
      <td>Suffolk</td>
    </tr>
    <tr>
      <td>Holtsville</td>
      <td>NY</td>
      <td>00544</td>
      <td>40.8152</td>
      <td>-73.0455</td>
      <td>Suffolk</td>
    </tr>
    <tr>
      <td>Adjuntas</td>
      <td>PR</td>
      <td>00601</td>
      <td>18.1788</td>
      <td>-66.7516</td>
      <td>Adjuntas</td>
    </tr>
    <tr>
      <td>Aguada</td>
      <td>PR</td>
      <td>00602</td>
      <td>18.381389</td>
      <td>-67.188611</td>
      <td>Aguada</td>
    </tr>
    <tr>
      <td>Aguadilla</td>
      <td>PR</td>
      <td>00603</td>
      <td>18.4554</td>
      <td>-67.1308</td>
      <td>Aguadilla</td>
    </tr>
    <tr>
      <td>Aguadilla</td>
      <td>PR</td>
      <td>00604</td>
      <td>18.4812</td>
      <td>-67.1467</td>
      <td>Aguadilla</td>
    </tr>
    <tr>
      <td>Aguadilla</td>
      <td>PR</td>
      <td>00605</td>
      <td>18.429444</td>
      <td>-67.154444</td>
      <td>Aguadilla</td>
    </tr>
    <tr>
      <td>Maricao</td>
      <td>PR</td>
      <td>00606</td>
      <td>18.182778</td>
      <td>-66.980278</td>
      <td>Maricao</td>
    </tr>
    <tr>
      <td>Anasco</td>
      <td>PR</td>
      <td>00610</td>
      <td>18.284722</td>
      <td>-67.14</td>
      <td>Anasco</td>
    </tr>
    <tr>
      <td>Angeles</td>
      <td>PR</td>
      <td>00611</td>
      <td>18.286944</td>
      <td>-66.799722</td>
      <td>Utuado</td>
    </tr>
    <tr>
      <td>Arecibo</td>
      <td>PR</td>
      <td>00612</td>
      <td>18.4389</td>
      <td>-66.6924</td>
      <td>Arecibo</td>
    </tr>
    <tr>
      <td>Arecibo</td>
      <td>PR</td>
      <td>00613</td>
      <td>18.1399</td>
      <td>-66.6344</td>
      <td>Arecibo</td>
    </tr>
    <tr>
      <td>Arecibo</td>
      <td>PR</td>
      <td>00614</td>
      <td>18.1399</td>
      <td>-66.6344</td>
      <td>Arecibo</td>
    </tr>
    <tr>
      <td>Bajadero</td>
      <td>PR</td>
      <td>00616</td>
      <td>18.428611</td>
      <td>-66.683611</td>
      <td>Arecibo</td>
    </tr>
    <tr>
      <td>Barceloneta</td>
      <td>PR</td>
      <td>00617</td>
      <td>18.4525</td>
      <td>-66.538889</td>
      <td>Barceloneta</td>
    </tr>
  </tbody>
  </table>

Answer 1

Issue is that you need to target a specific selector to the one clicked. So Change

$( '.tablescroll_head' ).click(function() {
  $( '.tablescroll_wrapper').slideUp(); //This will select all wrappers and apply slide on them
    .toggle();
});

to

$('.tablescroll_head').click(function () {
    $(this).next().slideToggle(); //Select only the one that needs to be impacted.
});

Demo