Close previous table row when clicking on another

Question

I'm fetching data into the table and on clicking any table row it open a nested colspan inside table row. I want to close previous table row if i click on another table row (Like accordion does )

this is a table body structure

<tbody style="cursor:pointer" v-for="(statement,index) in statements">
    <tr @click="statementDetail(index,statement.paper_quality_id.id,statement.paper_brand_id.id,statement.paper_size_id.id,statement.thickness)"
      >
       <td>{{index+1}}</td>
       <td>
          {{statement.paper_quality_id.paper_quality}} -
          {{statement.paper_size_id.length}} X {{statement.paper_size_id.width}} -
          {{statement.paper_brand_id.paper_brand}} -
          {{statement.thickness}}
       </td>
       <td>
          <div class="row">
             <div
                class="col-md-4 text-center"
                >{{parseInt((statement.in_total_before - statement.total_out_before)/500)}}</div>
             <div
                class="col-md-4 text-center"
                >{{parseInt((statement.in_total_before - statement.total_out_before)%500)}}</div>
          </div>
       </td>
       <td>
          <div class="row">
             <div
                class="col-md-4 text-center"
                >{{parseInt((statement.total_sheets_in_range)/500)}}</div>
             <div
                class="col-md-4 text-center"
                >{{parseInt((statement.total_sheets_in_range)%500)}}</div>
          </div>
       </td>
       <td>
          <div class="row">
             <div
                class="col-md-4 text-center"
                >{{parseInt((statement.total_outward_range)/500)}}</div>
             <div
                class="col-md-4 text-center"
                >{{parseInt((statement.total_outward_range)%500)}}</div>
          </div>
       </td>
       <td>
          <div class="row">
             <div class="col-md-4 text-center">
                {{
                parseInt((((statement.in_total_before - statement.total_out_before) + (statement.total_sheets_in_range)) - statement.total_outward_range)/500)
                }}
             </div>
             <div class="col-md-4 text-center">
                {{
                parseInt((((statement.in_total_before - statement.total_out_before) + (statement.total_sheets_in_range)) - statement.total_outward_range)%500)
                }}
             </div>
          </div>
       </td>
    </tr>

This the nested table it appears when we click on table row

    <tr :id="'show_'+index" v-if = "index = indexData" >
       <td colspan="6">
          <table class="table table-hover">
             <tr>
                <th>Date</th>
                <th>Opening</th>
                <th>Inward</th>
                <th>Outward</th>
                <th>Balance</th>
             </tr>
             <tr v-for="(_statement,index) in statements_details"  >
                <td>{{_statement.date}}</td>
                <td>
                   <div class="row">
                      <div
                         class="col-md-3 text-center"
                         >{{parseInt((_statement.opening.total_in - _statement.opening.total_out)/500)}}</div>
                      <div
                         class="col-md-3 text-center"
                         >{{parseInt((_statement.opening.total_in - _statement.opening.total_out)%500)}}</div>
                   </div>
                </td>
                <td>
                   <div class="row">
                      <div class="col-md-3 text-center">{{parseInt((_statement.inward)/500)}}</div>
                      <div class="col-md-3 text-center">{{parseInt((_statement.inward)%500)}}</div>
                   </div>
                </td>
                <td>
                   <div class="row">
                      <div class="col-md-3 text-center">{{parseInt((_statement.outward)/500)}}</div>
                      <div class="col-md-3 text-center">{{parseInt((_statement.outward)%500)}}</div>
                   </div>
                </td>
                <td>
                   <div class="row">
                      <div
                         class="col-md-3 text-center"
                         >{{parseInt((_statement.balance.total_in - _statement.balance.total_out)/500)}}</div>
                      <div
                         class="col-md-3 text-center"
                         >{{parseInt((_statement.balance.total_in - _statement.balance.total_out)%500)}}</div>
                   </div>
                </td>
             </tr>
          </table>
       </td>
    </tr>
</tbody>

This is my js file

export default {
  data() {
    return {
      statements: '',
      users: [],
      ledger_name: '',
      paper_details: '',
      account_list: false,
      //statement Objects 
      id: '',
      start_date: '',
      end_date: '',
      paper_quality_id: '',
      paper_size_id: '',
      paper_brand_id: '',
      thickness: '',
      statements_details: '',
      stockIDS: '',
      indexData: ''
    };
},
created() {
    this.fetchData();
},
  components: {
    appInventoryNavigation: InventoryNavBar,
},
methods: {

    // Fetching Ledger Account List 
    fetchData() {
      var vm = this;
      axios.get('/ledger/')
        .then((response) => {
          console.log(response)
          vm.users = response.data
        }).catch((err) => {
          console.log(err)
        });
    },
    //Setting LedgerID In Hidden Input Field
    setLedgerID_1(id, name) {

      this.account_name = id;
      this.account_list = false;
      this.id = id;
      this.ledger_name = name;
    },
    call() {
      this.account_list = true;
    },
    //Posting LedgeID
    PostLedgerID(e) {
      e.preventDefault();

      const AccountDetail = {
        id: this.id,
        start_date: this.start_date + ' 00:00:00.957761',
        end_date: this.end_date + ' 00:00:00.957761'
      }
      var vm = this;
      axios.post('/Statement/', AccountDetail)
        .then((response) => {
          console.log(response)
          vm.statements = response.data;

        }).catch((err) => {
          console.log(err)
        });
    },

    //Show Hide Nested Table
    statementDetail(rowid, paper_id, brand_id, size_id, thickness) {
      this.indexData = rowid;
      alert(this.indexData)
      const userDetail = {
        account_access_key_id: $('#ledger_id').val(),
        start_date: this.start_date + ' 00:00:00.957761',
        end_date: this.end_date + ' 00:00:00.957761',
        paper_quality_id: paper_id,
        paper_brand_id: brand_id,
        paper_size_id: size_id,
        thickness: thickness
      }
      axios.post('/StatementDetail/', userDetail)
        .then((response) => {

          $('#show_' + rowid).toggle();
          this.statements_details = response.data;
        }).catch((err) => {
          console.log(err)
        });
    }

  },
};

Answer 1

Change v-show="indexData === index".

And in your method check if rowid is changed and move this.indexData = rowid; after axios request:

statementDetail(rowid, paper_id, brand_id, size_id, thickness) {
    if (rowid !== this.indexData){
      const userDetail = {
        account_access_key_id: $('#ledger_id').val(),
        start_date: this.start_date + ' 00:00:00.957761',
        end_date: this.end_date + ' 00:00:00.957761',
        paper_quality_id: paper_id,
        paper_brand_id: brand_id,
        paper_size_id: size_id,
        thickness: thickness
      }
      axios.post('/StatementDetail/', userDetail)
        .then((response) => {

          $('#show_' + rowid).toggle();
          this.statements_details = response.data;
        }).catch((err) => {
          console.log(err)
        });
      this.indexData = rowid;
    }
  }

Good luck.