CODEWITHSUNDEEP
vue.jsbootstrap-5
16_018_RHR
16_018_RHR

Reputation: 417

toggle accordion only with icon & add a click event on button

I want to toggle the accordion only with the icons to add a click event on the button. How do I do this? I have tried this-- 

    <html>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

    <div id="app">
       <div id="t_accordion">
      <div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header " id="headingOne">
      <button  @click="toggleTheme" class="accordion-button collapsed"  type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        User
      </button>
    </h2>
    
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button  @click="toggleTheme" class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
        View
      </button>
    </h2>
    
  </div>
  <div>
    <div id="collapseOne" class="accordion-collapse collapse " aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>User Content</strong>
        
      </div>
    </div>
    <div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>View Content</strong> 
        
      </div>
    </div>
  </div>
</div>
    </div>
    </div>

    <!-- Don't forget to include Vue from CDN! -->
    <script src="https://unpkg.com/vue@2"></script>
    <script>
      new Vue({
        el: '#app', //Tells Vue to render in HTML element with id "app"
        data() {
          return {
            message: 'Hello World!'
          }
        },
        methods:{
      toggleTheme(){
        // alert('clicked')
          this.isActive = !this.isActive;
      }
    }
      });
    </script>
<style>
  .accordion-button {
    pointer-events:none;
}

.accordion-button::after {
    pointer-events: all;
}

</style>
    </html>
In this snippet The toggle on icon is working but Click event on button does not work. How do I do the accordion toggle on icon & click event on button separately?

Upvotes: 1

Views: 656

Answers (1)

16_018_RHR
16_018_RHR

Reputation: 417

I just split the button in two ways

    <html>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

    <div id="app">
       <div id="t_accordion">
      <div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header " id="headingOne">
      <button class="d-flex bg-white mx-auto">
    <a @click="toggleTheme">User</a>
    <a href="#" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>
  </button>
    </h2>
    
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="d-flex bg-white mx-auto">
    <a @click="toggleTheme">View</a>
    <a href="" class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"></a>
  </button>
    </h2>
    
  </div>
  <div>
    <div id="collapseOne" class="accordion-collapse collapse " aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>User Content</strong>
        
      </div>
    </div>
    <div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>View Content</strong> 
        
      </div>
    </div>
  </div>
</div>
    </div>
    </div>

    <!-- Don't forget to include Vue from CDN! -->
    <script src="https://unpkg.com/vue@2"></script>
    <script>
      new Vue({
        el: '#app', //Tells Vue to render in HTML element with id "app"
        data() {
          return {
            message: 'Hello World!'
          }
        },
        methods:{
      toggleTheme(){
        // alert('clicked')
          this.isActive = !this.isActive;
      }
    }
      });
    </script>
<style>
  .accordion-button {
    pointer-events:none;
}

.accordion-button::after {
    pointer-events: all;
}

</style>
    </html>

Upvotes: 1

Related Questions