0

How to change vertical tab dynamically in LWC

Html

<div class="slds-vertical-tabs">
    <ul class="slds-vertical-tabs__nav" role="tablist" aria-orientation="vertical">
        <li class="slds-vertical-tabs__nav-item slds-is-active" title="Tab 1" role="presentation">
            <a class="slds-vertical-tabs__link" href="javascript:void(0)"  onclick={saveMethod}  role="tab" tabindex="0"
                aria-selected="true" aria-controls="slds-vertical-tabs-0" id="slds-vertical-tabs-0__nav">
                <span class="slds-vertical-tabs__left-icon"></span>
                <span class="slds-truncate" title="Tab 1">Tab 1</span>
                <span class="slds-vertical-tabs__right-icon"></span>
            </a>
        </li>
        <li class="slds-vertical-tabs__nav-item" title="Tab 2" role="presentation">
            <a class="slds-vertical-tabs__link" href="javascript:void(0)" onclick={saveMethod} role="tab" tabindex="-1"
                aria-selected="false" aria-controls="slds-vertical-tabs-1" id="slds-vertical-tabs-1__nav">
                <span class="slds-vertical-tabs__left-icon"></span>
                <span class="slds-truncate" title="Tab 2">Tab 2</span>
                <span class="slds-vertical-tabs__right-icon"></span>
            </a>
        </li>
        <li class="slds-vertical-tabs__nav-item" title="Tab 3 has a really long label and can wrap or truncate"
            role="presentation">
            <a class="slds-vertical-tabs__link" href="javascript:void(0)"  onclick={saveMethod} role="tab" tabindex="-1"
                aria-selected="false" aria-controls="slds-vertical-tabs-2" id="slds-vertical-tabs-2__nav">
                <span class="slds-vertical-tabs__left-icon"></span>
                <span class="slds-truncate" title="Tab 3 has a really long label and can wrap or truncate">Tab 3  </span>
                <span class="slds-vertical-tabs__right-icon"></span>
            </a>
        </li>
    </ul>
    <div class="slds-vertical-tabs__content slds-show" id="slds-vertical-tabs-0" role="tabpanel"
        aria-labelledby="slds-vertical-tabs-0__nav">
        <div class="slds-text-longform">
            <h3 class="slds-text-heading_medium">Tab Title</h3>
            <p>Content for Tab 1</p>
            <p>Lorem ipsum dolor...</p>
            <p>Lorem ipsum dolor...</p>
        </div>
    </div>
    <div class="slds-vertical-tabs__content slds-hide" id="slds-vertical-tabs-1" role="tabpanel"
        aria-labelledby="slds-vertical-tabs-1__nav">
        <div class="slds-text-longform">
            <h3 class="slds-text-heading_medium">Tab Title</h3>
            <p>Content for Tab 2</p>
            <p>Lorem ipsum dolor...</p>
            <p>Lorem ipsum dolor...</p>
        </div>
    </div>
    <div class="slds-vertical-tabs__content slds-hide" id="slds-vertical-tabs-2" role="tabpanel"
        aria-labelledby="slds-vertical-tabs-2__nav">
        <div class="slds-text-longform">
            <h3 class="slds-text-heading_medium">Tab Title</h3>
            <p>Content for Tab 3</p>
            <p>Lorem ipsum dolor...</p>
            <p>Lorem ipsum dolor...</p>
        </div>
    </div>
</div>

Js

    /* eslint-disable no-console */
    /* eslint-disable no-unused-vars */
    /* eslint-disable @lwc/lwc/no-document-query */
    import { LightningElement } from 'lwc';
    export default class Enrollment extends LightningElement {

    saveMethod(event) {
        //document.getElementsByName("slds-vertical-tabs-1");
        console.log("event target===>>"+event.target.id);
        //console.log("current target===>>"+ event.currentTarget);

    }
}
3
0

Try this

 saveMethod(event) {


              this.template.querySelector('.slds-show').classList.add('slds-hide');
              this.template.querySelector('.slds-show').classList.remove('slds-show');
              this.template.querySelector('.slds-is-active').classList.remove('slds-is-active');

              var y=event.target.parentElement;


             y.classList.add('slds-is-active');

             var x=event.target.id;


       let target = this.template.querySelector(`[aria-labelledby="${x}"]`);

       target.classList.remove('slds-hide');
       target.classList.add('slds-show');







    }

https://developer.salesforce.com/docs/component-library/tools/playground/ycqTBcTN/1/edit

1
  • Thanks for the Code, But is there any way we can simplify the .js code. Like document.getElementById(cityName).style.display = "block"; – user3214361 Feb 16 '20 at 3:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.