[DIVI] not all accordion row works

On this page: http://www.cit.al****ove.net/awards-and-certifications/

There are accordions, I need it so when you open one it closes the others, it works in rows but not on all of them.

  • Kris
    • Support

    Hi allanlove

    Hope all good on other side :slight_smile:

    There is no easy way to do that as DIVI have own build in rules and you have there 3 columns with own accordions.

    However I made a test in my site and if you create 1 column with 6 accordions + some css this could work.
    Note this will not work correct for last 7nd element which will be separate.

    After you create all 6 accordions in one column please add some custom ID for your row, for example "accordionsection".

    Then add this css in your Appearance -> Customize -> Additional CSS section:

    #accordionsection .et_pb_accordion_item {float:left; width:33%; }
    #accordionsection .et_pb_accordion_item:nth-child(4) { clear:both;}

    Hope this help :slight_smile:

    Kind Regards,
    Kris

  • Kris
    • Support

    Hi allanlove

    Please remove old code and use this new one which support mobile view as well :slight_smile:

    #accordionsection .et_pb_accordion_item{float:left;width:30%;}
    #accordionsection .et_pb_accordion_item:nth-child(4){clear:both; margin:0 5% 0 0;}
    #accordionsection .et_pb_accordion_item:nth-child(1){margin:0 5% 0 0;}
    #accordionsection .et_pb_accordion_item:nth-child(2){margin:0 5% 0 0;}
    #accordionsection .et_pb_accordion_item:nth-child(5){margin:0 5% 0 0;}
    
    @media all and (max-width:1440px) {
    #accordionsection .et_pb_accordion_item{float:none;width:100%;  margin:20px 0 0 0 !important;}
    #accordionsection .et_pb_accordion_item:nth-child(4){clear:both; margin:0 ;}
    #accordionsection .et_pb_accordion_item:nth-child(1){margin:0 ;}
    #accordionsection .et_pb_accordion_item:nth-child(2){margin:0 ;}
    #accordionsection .et_pb_accordion_item:nth-child(5){margin:0 ;}
    }

    Kind Regards,
    Kris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.