I have created a tabs dropdown module using javascript & it is working fine
const service = document.querySelectorAll('[data-step-id="service"]');
const category = service[1].querySelectorAll('.service_category');
const sedan = category[0];
const suv = category[1];
const others = category[2];
const monthlypackages = category[3];
const servicecard = service[1].querySelectorAll('.service_card');
// onclick Sedan Category The first 4 service cards from(0-3) will show/hide
sedan.addEventListener('click', function() {
for (var i = 0; i < 4; i++){
if (servicecard[i].classList.contains('h-hide')){
servicecard[i].classList.remove('h-hide');
}
else {servicecard[i].classList.add('h-hide');}
}
});
// onclick SUV Category The 4 service cards from(4-7) will show/hide
suv.addEventListener('click', function() {
for (var i = 4; i < 8; i++){
if (servicecard[i].classList.contains('h-hide')){
servicecard[i].classList.remove('h-hide');
}
else {servicecard[i].classList.add('h-hide');}
}
});
// onclick Others Category The 3 service cards from(8-10) will show/hide
others.addEventListener('click', function() {
for (var i = 8; i < 11; i++){
if (servicecard[i].classList.contains('h-hide')){
servicecard[i].classList.remove('h-hide');
}
else {servicecard[i].classList.add('h-hide');}
}
});
// onclick monthlypackages Category The last 3 service cards from(11-13) will show/hide
monthlypackages.addEventListener('click', function() {
for (var i = 11; i < servicecard.length; i++){
if (servicecard[i].classList.contains('h-hide')){
servicecard[i].classList.remove('h-hide');
}
else {servicecard[i].classList.add('h-hide');}
}
});
To this I want to add is only one at a time should be opened
I am trying to do like this but not working on all scenarios
-
All tabs should not be opened at the same time like sedan category is visible others should not be visible. - This is working only for the first time
-
All category tabs should toggle show/hide - This is Not working
const sedanfirstchild = servicecard[0]; const suvfirstchild = servicecard[4]; const otherfirstchild = servicecard[8]; const monthlypackagesfirstchild = servicecard[11]; function sedannone() { if (sedanfirstchild.classList.contains('h-hide')){ console.log('Sedan is not Visible'); } else { sedan.click(); } } function suvnone() { if (suvfirstchild.classList.contains('h-hide')){ console.log('SUV is not Visible'); } else { suv.click(); } } function othersnone() { if (otherfirstchild.classList.contains('h-hide')){ console.log('Others is not Visible'); } else { others.click(); } } function monthlypackagesnone() { if (monthlypackagesfirstchild.classList.contains('h-hide')){ console.log('monthly packages is not Visible'); } else { monthlypackages.click(); } } // onclick Sedan Category The first 4 service cards from(0-3) will show/hide sedan.addEventListener('click', function() { for (var i = 0; i < 4; i++){ if (servicecard[i].classList.contains('h-hide')){ suvnone(); othersnone(); monthlypackagesnone(); servicecard[i].classList.remove('h-hide'); } else {servicecard[i].classList.add('h-hide');} } }); // onclick SUV Category The 4 service cards from(4-7) will show/hide suv.addEventListener('click', function() { for (var i = 4; i < 8; i++){ if (servicecard[i].classList.contains('h-hide')){ sedannone(); othersnone(); monthlypackagesnone(); servicecard[i].classList.remove('h-hide'); } else {servicecard[i].classList.add('h-hide');} } }); // onclick Others Category The 3 service cards from(8-10) will show/hide others.addEventListener('click', function() { for (var i = 8; i < 11; i++){ if (servicecard[i].classList.contains('h-hide')){ sedannone(); suvsnone(); monthlypackagesnone(); servicecard[i].classList.remove('h-hide'); } else {servicecard[i].classList.add('h-hide');} } }); // onclick monthlypackages Category The last 3 service cards from(11-13) will show/hide monthlypackages.addEventListener('click', function() { for (var i = 11; i < servicecard.length; i++){ if (servicecard[i].classList.contains('h-hide')){ sedannone(); suvnone(); othersnone(); servicecard[i].classList.remove('h-hide'); } else {servicecard[i].classList.add('h-hide');} } });
Aucun commentaire:
Enregistrer un commentaire