Magento 2 : toggle whole group in system.xml based on field in another group

Question

I have created two groups in system.xml.

I need to show/hide group 2 depending on the "Module Enable" field in group 1.

But when I use the following code it hides both the sections and does not save anything to the configuration table.

<section id="fancypopup" translate="label" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Fancy Popup</label>
 <tab>asoft</tab>
 <resource>Asoft_Fancypop::config</resource>
 <group id="general" translate="label" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>General Settings</label>
 <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Module Enable</label>
 <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
 </field>
 </group>
 <group id="popup" translate="label" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Popup Settings</label>
 <field id="show_on" translate="label comment" type="select" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Show on</label>
 <source_model>Asoft\Fancypop\Model\Config\Settings\Popup\ShowOn</source_model>
 </field>
 <field id="active_from" translate="label comment" type="date" sortOrder="110" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Active from</label>
 <frontend_model>Asoft\Fancypop\Block\Adminhtml\System\Config\Date</frontend_model>
 </field>
 <field id="active_to" translate="label comment" type="date" sortOrder="120" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Active to</label>
 <frontend_model>Asoft\Fancypop\Block\Adminhtml\System\Config\Date</frontend_model>
 </field>
 <field id="delay" translate="label comment" type="text" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Delay(miliseconds)</label>
 </field>
 <field id="bg_color" translate="label comment" type="text" sortOrder="160" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Popup Backgroud Color</label>
 </field>
 <field id="bg_image" translate="label" type="image" sortOrder="170" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Popup Background Image</label>
 <comment>Allowed file types:PNG, GIF, JPG, JPEG.</comment>
 <backend_model>Asoft\Fancypop\Model\Config\Backend\Image\Popupbg</backend_model>
 <base_url type="media" scope_info="1">asoft/fancypop/background</base_url>
 </field>
 <field id="custom_style" translate="label comment" type="textarea" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Custom Style</label>
 </field>
 <field id="link_to_page" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Link to page</label>
 </field>
 <field id="width" translate="label comment" type="text" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Popup Width</label>
 <validate>required-entry validate-number</validate>
 </field>
 <field id="height" translate="label comment" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Popup Height</label>
 <validate>required-entry validate-number</validate>
 </field>
 <depends>
 <field id="fancypopup/general/enable">1</field>
 </depends>
 </group>
 </section>

Please help.

Answer 1

Kindly correct the close tag

<field id="height" translate="label comment" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Popup Height</label>
 <validate>required-entry validate-number</validate>
 <depends>
 <field id="fancypopup/general/enable">1</field>
 </depends>
</field>

Hope it's helpful

• Abid Malik: So it means I have to add <depends> tag in each field if I have to hid the group. Isn't there anyway to hide all the group in on go?
• Arunprabakaran M: when using system.xml depends tag for fields only not for a group.Otherwise you can try magento.stackexchange.com/a/193907/60921

Answer 2

Just want to update that this works for groups. Just add the depends tag to the group you want to hide/show depending on a field in a different group. Confirmed on v2.4.2.