@sai_santhosht50 The steps mentioned in the link by @Theo_Pendle mentioned by @Suraj_Kamdi will help you with one option at a time.That means, if you want to show dropdown in Tab 2 when you select val1 , it will work. But for showing dropdown in Tab 2 , when you select both val1 and val2 , you need to tweek the JS a little bit. I tried to do the same and adding the steps below. I would like you to use meaningful names , the values here are just for demo
Now , when you run this, you will see that , your fields are getting hidden for val2 and val3. That's perfectly alright. We will adjust this😉
Below are the steps I did to get it to work for this use-case . Before going to that I will just walk you through the js a bit , to give an understanding on what exactly happens when you set the values mentioned in the blog
Go to /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js in your CRXDE and open the JS
if you check this line, you can see that only the element with the "showhidetargetvalue" will be visible and everything else will be hidden via line 63. So what we should do is to modify this line to make the field visible for one more value. The beauty of data- attributes is that you can give any name and add a data-* attribute to your HTML element. So I will create another data-* attribute element and add to the field.
Go to your component node and add another data-* attribute value as below. This value can be anything
Now I copied the dropdownshowhide.js JS to my component to modify it. I created a clientlib and added it as extraclientlib to my component.
Now in the JS I added an additional line to make sure the fields with the new data attribute value I added will also be showed when I select the dropdown
This worked for me and should work in your case. Hope it is helps☺🙂