Vuejs tutorial: Toggle a collapsible menu based on the active tab status

Question

Vuejs tutorial: Toggle a collapsible menu based on the active tab status

I am using two methods called forceOpenSettings() and forceCloseSettings() to control the opening and closing of a collapsible section. These methods function properly when tested individually. However, I need them to be triggered based on a specific condition related to a b-tab with 4 tabs. When a tab is clicked, the collapse should open and when it becomes inactive, the collapse should close.

<b-tabs content-class="mt-3">
  <b-tab title="First" active><p>I'm the first tab</p></b-tab>
  <b-tab title="Second"><p>I'm the second tab</p></b-tab>
</b-tabs>

I have successfully implemented a similar functionality using @show and @hide in a b-collapse element.

<b-collapse role="tabpanel" @show="forceOpenSettings" @hide="forceCloseSettings">......</b-collapse>

javascript vue.js bootstrap-vue

Answer 1

Answer №1

JavaScript Vanilla: An example of a Dynamic iterator that checks for the presence of the 'active' attribute...

function opendiv() {
  document.getElementById('myDiv').style.display = "block";
}

function closediv() {
  document.getElementById('myDiv').style.display = "none";
}

let tabs = document.getElementsByTagName('b-tab');
for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', event => {
    if (tabs[i].getAttribute("active") !== null) {
      opendiv();
    } else {
      closediv();
    }
  });
}

<b-tabs content-class="mt-3">
  <b-tab title="First">
    <p>I'm the first tab</p>
  </b-tab>
  <b-tab title="Second" active>
    <p>I'm the second tab</p>
  </b-tab>
</b-tabs>

<div id="myDiv" style="display:none;">Show this div when second tab has an attribute named 'active'</div>

Retrieve elements by their tag name... Then create a conditional statement to look for the second instance of the elements using the index 1, which corresponds to the second tab. Verify whether the attribute is not set to null, indicating it is present but empty. If the attribute is absent, the function will return null.

  let tabs = document.getElementsByTagName('b-tab');

  if(tabs[1].getAttribute("active") !== null){
    // execute opendiv();
  }else{
    // execute closediv();
  }

Answer 2

JavaScript Vanilla: An example of a Dynamic iterator that checks for the presence of the 'active' attribute...

function opendiv() {
  document.getElementById('myDiv').style.display = "block";
}

function closediv() {
  document.getElementById('myDiv').style.display = "none";
}

let tabs = document.getElementsByTagName('b-tab');
for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', event => {
    if (tabs[i].getAttribute("active") !== null) {
      opendiv();
    } else {
      closediv();
    }
  });
}

<b-tabs content-class="mt-3">
  <b-tab title="First">
    <p>I'm the first tab</p>
  </b-tab>
  <b-tab title="Second" active>
    <p>I'm the second tab</p>
  </b-tab>
</b-tabs>

<div id="myDiv" style="display:none;">Show this div when second tab has an attribute named 'active'</div>

Retrieve elements by their tag name... Then create a conditional statement to look for the second instance of the elements using the index 1, which corresponds to the second tab. Verify whether the attribute is not set to null, indicating it is present but empty. If the attribute is absent, the function will return null.

  let tabs = document.getElementsByTagName('b-tab');

  if(tabs[1].getAttribute("active") !== null){
    // execute opendiv();
  }else{
    // execute closediv();
  }

Answer 3

Answer №2

With Vue, the data drives everything, eliminating the need for functions like this:

{
  ...,
  data(){
    return {
      ...,
      active: 'first',
      tabs: ["first", "second", "third"]
    }
  }
}

<b-tabs content-class="mt-3">
  <b-tab
    v-for="tab in tabs"
    :key="tab"
    :title="tab" 
    :active="active==tab" 
    @click="active=tab" 
    :style="`display:${active==tab? 'block':'none}`'"
  >
    <p>I'm the {{tab}} tab</p>
  </b-tab>

</b-tabs>

Incorporating interaction with b-collapse component

{
  props: ["tab", "active"],
  computed(){
    collapse: {
      get: function(){
        return this.active == this.tab
      },
      set: function(value){
        this.$emit('update:active', this.tab)
      }
    }
  }
}

<!-- Encapsulate in a component for proper prop management -> no collapse[tab] needed than -->
<template>
<b-collapse 
  role="tabpanel" 
  v-model="collapse"
 ><slot></slot></b-collapse>
 </template>

 <!-- within the scope of tabs -->
 <wrapped-collapse 
    v-for="tab in tabs"
    :key="tab"
    :active.sync="active" :tab="tab"  
  >...</wrapped-collapse>

Answer 4

With Vue, the data drives everything, eliminating the need for functions like this:

{
  ...,
  data(){
    return {
      ...,
      active: 'first',
      tabs: ["first", "second", "third"]
    }
  }
}

<b-tabs content-class="mt-3">
  <b-tab
    v-for="tab in tabs"
    :key="tab"
    :title="tab" 
    :active="active==tab" 
    @click="active=tab" 
    :style="`display:${active==tab? 'block':'none}`'"
  >
    <p>I'm the {{tab}} tab</p>
  </b-tab>

</b-tabs>

Incorporating interaction with b-collapse component

{
  props: ["tab", "active"],
  computed(){
    collapse: {
      get: function(){
        return this.active == this.tab
      },
      set: function(value){
        this.$emit('update:active', this.tab)
      }
    }
  }
}

<!-- Encapsulate in a component for proper prop management -> no collapse[tab] needed than -->
<template>
<b-collapse 
  role="tabpanel" 
  v-model="collapse"
 ><slot></slot></b-collapse>
 </template>

 <!-- within the scope of tabs -->
 <wrapped-collapse 
    v-for="tab in tabs"
    :key="tab"
    :active.sync="active" :tab="tab"  
  >...</wrapped-collapse>

Answer 5

Answer №3

There is a simple way to achieve this without using multiple functions.

All you need is one function that removes the active attribute from all tabs and then adds it to the tab you clicked on. Just assign the class tab to all your <b-tab> elements, and you can apply this single function to any tab with that class. Trigger the function using the @click="doTabs()" directive.

The updated answer pertains to utilizing a Vue instance.

Execute the snippet below to observe the functionality.

new Vue({
  el: '#app',
  methods: {
    doTabs() {
      const tabs = document.querySelectorAll('.tab')
      tabs.forEach(i => i.removeAttribute('active'))
      event.currentTarget.setAttribute('active', true)
    }
  }
})

.tab {padding: 10px; border: 1px solid #ccc; cursor: pointer; display: flex; display: block}
[active] {background-color: #eee}
.content {padding-left: 20px; font-size: 12px; visibility: hidden; opacity: 0; transition: all 0.2s ease; margin-top: -40px}
[active] .content {visibility: visible; opacity: 1;margin-top: 0}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div title="First" class="tab" @click="doTabs()" active>
    <p>I'm the first tab</p>
    <div class="content">
      <p>Here is all the<br>accordion content</p>
    </div>
  </div>
  <div title="Second" class="tab" @click="doTabs()">
    <p>I'm the second tab</p>
    <div class="content">
      <p>Here is all the<br>accordion content</p>
    </div>
  </div>
</div>

Answer 6

There is a simple way to achieve this without using multiple functions.

All you need is one function that removes the active attribute from all tabs and then adds it to the tab you clicked on. Just assign the class tab to all your <b-tab> elements, and you can apply this single function to any tab with that class. Trigger the function using the @click="doTabs()" directive.

The updated answer pertains to utilizing a Vue instance.

Execute the snippet below to observe the functionality.

new Vue({
  el: '#app',
  methods: {
    doTabs() {
      const tabs = document.querySelectorAll('.tab')
      tabs.forEach(i => i.removeAttribute('active'))
      event.currentTarget.setAttribute('active', true)
    }
  }
})

.tab {padding: 10px; border: 1px solid #ccc; cursor: pointer; display: flex; display: block}
[active] {background-color: #eee}
.content {padding-left: 20px; font-size: 12px; visibility: hidden; opacity: 0; transition: all 0.2s ease; margin-top: -40px}
[active] .content {visibility: visible; opacity: 1;margin-top: 0}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div title="First" class="tab" @click="doTabs()" active>
    <p>I'm the first tab</p>
    <div class="content">
      <p>Here is all the<br>accordion content</p>
    </div>
  </div>
  <div title="Second" class="tab" @click="doTabs()">
    <p>I'm the second tab</p>
    <div class="content">
      <p>Here is all the<br>accordion content</p>
    </div>
  </div>
</div>

Vuejs tutorial: Toggle a collapsible menu based on the active tab status

Answer №1

Answer №2

Answer №3

Similar questions

What is the reason behind the perpetual hiding of the button?

deleting the current product information during an ajax request

Enable users to provide ratings ranging from 0.5 up to 5

Asynchronous waterfall call in Node.js to call the method before

I attempted to make changes to a Firebase document using the update() function, however, the document did not reflect

Guide to deploying a complete Wordpress application within a Nuxt application

Troubleshooting Angular 2: Instances of Classes Not Being Updated When Retrieving Parameters

What role does a promise play in rendering code asynchronous?

Angular-Translate fails to function within a tag's attribute

Step-by-step guide on retrieving data from E-goi with REST API in Google Apps Script

Storing Firestore Timestamp as a Map in the database

Tips for sending information from PHP to an AJAX function

Fixing PNG Fading Issue in Internet Explorer 8

Combining Data in Django using Ajax with JavaScript and Python Integration

Configure WebStorm so that node_modules is set as the library root, while simultaneously excluding it from indexing

Utilizing Typescript Generics in Arrow Function to Combine Two Arguments

What is the best way to use res.sendFile() to serve a file from a separate directory in an Express.js web application?

Organize information received from a post request into a JSON template

Show or hide the right element when clicked using ng-show in AngularJS

Including an <a> tag within a JavaScript variable to utilize in an HTML statement