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

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.