vue js transition between two buttons

Question

I am trying to swap between two buttons using vue js transition. I need to exchange the position of two accordions like this-- adode xd example

I have done this part. But how do I swap the buttons using vue transitions?

   

 <html>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" 
     rel="stylesheet" integrity="sha384- 
     0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0- 
     beta1/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="leaveScreen = true" class="click-me">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>

    </html>

I am new to vue js. If anyone knows about vue transition animations plase help me to solve the problem

vue js transition between two buttons

0 Answers0