Switching tabs with javaScript using Lightning design system css in Salesforce

	<apex:page >
	<apex:slds />
	<div class="slds-tabs_default">
	<ul class="slds-tabs_default__nav" role="tablist">
	<li class="slds-tabs_default__item slds-is-active" title="MyTab1" role="presentation" id="tab-MyTab1__item">
	<a onclick="toggleSubtabs('MyTab1');" class="slds-tabs_default__link" href="#" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1">My Tab1</a>
	</li>
	<li class="slds-tabs_default__item" title="My Tab2 Content" role="presentation" id="tab-MyTab2__item">
	<a onclick="toggleSubtabs('MyTab2');" class="slds-tabs_default__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-2">My Tab2</a>
	</li>
	</ul>
	<div id="tab-MyTab1" class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">
	MyTab1
	</div>
	<div id="tab-MyTab2" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">
	My Tab2 Content
	</div>
	</div>
	<script>
	function toggleSubtabs(tabName) {
	debugger;
	if(tabName == "MyTab1") {
	document.getElementById('tab-MyTab1__item').classList.add("slds-is-active");
	document.getElementById('tab-MyTab2__item').classList.remove("slds-is-active");
	document.getElementById('tab-MyTab1').classList.add("slds-show");
	document.getElementById('tab-MyTab1').classList.remove("slds-hide");
	document.getElementById('tab-MyTab2').classList.remove("slds-show");
	document.getElementById('tab-MyTab2').classList.add("slds-hide");
	if(document.getElementById("incentivePaymentsHome").innerHTML == "")
	loadP();
	}
	else if(tabName == "MyTab2") {
	document.getElementById('tab-MyTab1__item').classList.remove("slds-is-active");
	document.getElementById('tab-MyTab2__item').classList.add("slds-is-active");
	document.getElementById('tab-MyTab1').classList.remove("slds-show");
	document.getElementById('tab-MyTab1').classList.add("slds-hide");
	document.getElementById('tab-MyTab2').classList.add("slds-show");
	document.getElementById('tab-MyTab2').classList.remove("slds-hide");
	}
	}
	</script>
	</apex:page>

view raw SwitchTabsJavaScript hosted with ❤ by GitHub

To increase the modal width in Aura or LWC component Salesforce

	To increase the Modal width
	============================
	LWC -
	In CSS File -
	.slds-modal__container{
	max-width: 90rem !important;
	width:100% !important;
	}
	Aura -
	In .cmp file -
	<aura:html tag="style">
	.slds-modal__container{
	max-width: 90rem !important;
	width:100% !important;
	}
	</aura:html>

view raw Modal Width hosted with ❤ by GitHub