vendredi 5 mars 2021

Javascript error if statement is not proceeding forward after function

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

  1. 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

  2. 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