Display prestahop customizable text only when a combination is selected

Question

I have a shop with 2 combinations. Yes and No. I added a customizable text to my products but I would like this text area to appear only when "yes" is selected. Can someone please help me do this?

Thanks!

Edit:

Thank you for replying. My code looks like this now:

//init the serialScroll for thumbs
$('#thumbs_list').serialScroll({
    items:'li:visible',
    prev:'#view_scroll_left',
    next:'#view_scroll_right',
    axis:'x',
    offset:0,
    start:0,
    stop:true,
    onBefore:serialScrollFixLock,
    duration:700,
    step: 2,
    lazy: true,
    lock: false,
    force:false,
    cycle:false
});

$('#group_22').change(function() {
$('.idTab10').toggle();

});

Sadly it doesn't work. Nothing happens. The (Yes) select ID is 22. Please advise.

Answer 1

I suggest you do that with jQuery.

You just have to modify the file /themes/your_theme/js/product.js
In this file, search for:

$(document).ready(function()
{
    ...
});

At the end of it, add the following code:

toggleCustomization(); // We launch the function on page load
$('#group_4').change(function() { // We launch the function when select is changed
    toggleCustomization();
});

And right after closing $(document).ready(function(), add this function :

function toggleCustomization() { // Hide or Show Customization Form and Tab
    if($('#group_4').val() == '23') { // We hide Customization Form and Tab if No is selected
        $('#idTab10').hide();
        $('a[href="#idTab10"]').hide();
    } else { // We show Customization Form and Tab if Yes is selected
        $('#idTab10').show();
        $('a[href="#idTab10"]').show();
    }
};

Where:

• group_4 is the id of your Yes-No select
• idTab10 is the id of the bloc containing all information about your customization field
• 23 is the value of 'No' in your select