onclick show/hide next table rows

onclick get button show/hide next rows between the clicked button and next button.
How to display these rows as hidden first and after that i can switch between show and hide them. if it is possible with vanilla JavaScript and CSS.

table,
th,
td {
  border: 1px solid black;
}

<table>
  <tr>
    <td><button>show/hide</button> A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test 1</td>
    <td>test 1</td>
    <td>test 1</td>
  </tr>
  <tr>
    <td><button>show/hide</button> AA</td>
    <td>BB</td>
    <td>CC</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test 1</td>
    <td>test 1</td>
    <td>test 1</td>
  </tr>
  <tr>
    <td><button>show/hide</button> AAA</td>
    <td>BBB</td>
    <td>CCC</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test 1</td>
    <td>test 1</td>
    <td>test 1</td>
  </tr>
</table>

Solution

With vanilla javascript you can utilise the indexOf method to find where the table-row element containing the clicked button is and then iterating over N rows after and toggling the display state.

document.querySelectorAll('button').forEach(bttn=>bttn.addEventListener('click',function(e){
  /* create an array from the nodelist so that `indexOf` can be used */
  let col=[...document.querySelectorAll('tr')];
  
  /* find the parent table row of the invoking button */
  let tr=this.parentNode.parentNode;
  
  /* find which table row in the array was the event source */
  let index=col.indexOf( tr ) + 1;
  
  /* process the next N records/rows */
  for( let i=index; i < index + 2; i++ ){
    col[i].style.display=col[i].style.display=='table-row' || col[i].style.display=='' ? 'none' : 'table-row'
  }
}))

table, th, td {
  border: 1px solid black;
}
tr{display:table-row}

<table>
        <tr>
            <td><button>show/hide</button> A</td>
            <td>B</td>
            <td>C</td>
        </tr>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
        <tr>
            <td>test 1</td>
            <td>test 1</td>
            <td>test 1</td>
        </tr>
        <tr>
            <td><button>show/hide</button> AA</td>
            <td>BB</td>
            <td>CC</td>
        </tr>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
        <tr>
            <td>test 1</td>
            <td>test 1</td>
            <td>test 1</td>
        </tr>
        <tr>
            <td><button>show/hide</button> AAA</td>
            <td>BBB</td>
            <td>CCC</td>
        </tr>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
        <tr>
            <td>test 1</td>
            <td>test 1</td>
            <td>test 1</td>
        </tr>
    </table>