expand/collapse table rows with JQuery

Question

I want to expand and collapse table rows when header columns is clicked. I only want to expand/collapse rows which are under the specific header (clicked).

Here is m

Answer 1

A JavaScript accordion does the trick.

This fiddle by W3Schools makes a simple task even more simple using nothing but javascript, which i partially reproduce below.

...
Section 1

  
Lorem ipsum dolor sit amet

...
Table

  
...


...
...

  
Lorem ipsum dolor sit amet
  ...
  

...

if using php, don't forget to convert " to '. You can also use tables of data inside the button and it will still work.