Magento 2 : Field depends in system.xml when fields are not in the same group

Question

How can you set <depends> for a field which is not in the same group of fields

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
 <system>
 <section id="section" translate="label" type="text" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Name</label>
 <tab>tabname</tab>
 <resource>Namespace_ModuleName::method</resource>
 <group id="group" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>General Configuration</label>
 <field id="field" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Enable</label>
 <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
 </field>
 </group>
 <group id="connection" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Connection Configuration</label>
 <field id="disable_certificate_check" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Check</label>
 <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
 <depends>
 <field id="field">1</field>
 </depends>
 </field>
 </group>
 </section>
 </system>
</config>

Answer 1

Field id from depends node must contain section, group and field id's of the field you want to depend

<depends>
 <field id="section_id/group_id/field_id">1</field>
</depends>

• Dhrumin: Yes , try same way , but when in select "No" from the first group then hide both groups, can you please elaborate your answer on more.
• mshakeel: @St3phan, How can we hide a whole group?
• St3phan: @mshakeel, I do not know if it can but let me have a little time to test.
• mshakeel: @St3phan, did it using Javascript (answered). Share if you find a proper way.
• St3phan: You can use your jQuery code, sure.

Answer 2

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
 <system>
 <tab id="your_id" translate="label" sortOrder="1000">
 <label>your_label</label>
 </tab>
 <section id="your_id" translate="label" type="text" sortOrder="340" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>your_label</label>
 <tab>your_tab</tab>
 <resource>Your_Module::config</resource>
 <group id="your_id" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>your_label</label>
 <field id="your_id" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>your_label</label>
 <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
 </field>
 <field id="your_id" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>your_label</label>
 <depends>
 <field id="*/*/active">1</field>
 </depends>
 </field>
 <field id="your_id" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>your_label</label>
 <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
 <depends>
 <field id="*/*/active">1</field>
 </depends>
 </field>
 </group>
 <group id="your_id" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>your_label</label>
 <field id="your_id" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>your_label</label>
 <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
 </field> 
 <depends>
 <field id="section_id/group_id/field_id">1</field>
 </depends>
 </group> 
 </section>
 </system>
</config>

Answer 3

Hide Configuration Groups

For magento 2.1.x, you can use following jQuery to toggle dependent Configuration Groups:

<comment><![CDATA[
<script type="text/javascript">//<![CDATA[
 require(['jquery'], function(){
 if (jQuery('#field_id').val() == 'value_to_compare') {
 toggleDependantGroups(true);
 }
 jQuery('#field_id').change(function() {
 if (jQuery(this).val() == 'value_to_compare') {
 toggleDependantGroups(true);
 } else {
 toggleDependantGroups(false);
 }
 });
 function toggleDependantGroups(hide=true)
 {
 if (hide) {
 jQuery('#section-id').closest('div.section-config').hide();
 jQuery('#section-id').closest('div.section-config').hide();
 jQuery('#last-visible-section-id').closest('div.section-config').css('border-bottom-width', '0px');
 } else {
 jQuery('#section-id').closest('div.section-config').show();
 jQuery('#section-id').closest('div.section-config').show();
 jQuery('#last-visible-section-id').closest('div.section-config').css('border-bottom-width', '1px');
 }
 }
 });
</script>]]>

Replace ids where necessary.

• Jafar Pinjar: where to write this script? in which file?
• pathrider: Yes, what js file supports a system.xml layout definition?