I would like div class to disappear when other class appears, on click (js powered)

I’m working on a client’s web design and development powered by WordPress and Woocommerce, but I was forced to use a plugin and then modify it to fit the proposed design and functionality.

The plug-in is ‘Woocommerce Visual Products Configurator’:

http://demos.orionorigin.com/wpb/customize-your-product/?configurator_id=541c0f7ca24a3&product_id=120

It allows buyers to build their own item by selecting from a series of different attributes for different parts of an item. Ex, choosing different types of Soles for a shoe, as well as being able to choose from a series of laces for the same shoe.

I’ve successfully integrated and modified the plugin to my liking here:

[LINK REMOVED-VIEW LINK ABOVE, INSTEAD]

well…not quite to my liking yet.

My issue here is when the user selects an attribute group like ‘cop’, the options (or attributes) for that attribute group slides down on click, as well as slides back up on click. This animation is also applied to all other attribute groups onclick….attributes or the customization options slides up or down when you click the corresponding attribute group icon (cop or sole).

Since this is the case, options for each attribute group clicked to open remains open, until the corresponding group icon is clicked again to close…Meaning, unless you click an attribute group icon to hide its options, it will overlap along with options of other attribute groups that are also open, until hidden on click.

Is there anyway to fix this, so that when a user clicks an attribute group, the options of the one that was previously clicked open hides or slides back up?

I tried fixing this issue my self, but i’m not experienced with js (which is what the situation looks like its powered by).

I think I found the script for this particular action of sliding up or down on click:

    select_initial_layer();
$(document)
.on("click",".layer_set_wrap h3",function(){
    var $that=$(this);
    if($that.hasClass('is-open')){
        $that.parent().find('.layer_icon_wrap').slideUp().show();
        $that.removeClass('is-open');
    }else{
        $that.parent().find('.layer_icon_wrap').slideDown().show();
        $that.addClass('is-open');
    }
})

Any ideas on how I can modify this to slide back up or hide when other attribute groups (.layer_icon_name) are clicked to open?

THANKS!!