Home › Toolset Professional Support › [Resolved] custom code to hide a accordion depending on selection
Problem:
Show/hide accordion according to Select field option.
Solution:
I have updated the following JS code in View >> JS editor section and it resolved the issue:
//display tenure only when select 'For Sale' function display_tenture(){ $("div[data-target='#collapse-tenure']").parent('div.panel-info').hide(); //hide Tenure $('select[name="property-type"]').change(function(){ if(this.value == 'For Sale') { $("div[data-target='#collapse-tenure']").parent('div.panel-info').show(); //show Tenure } else{ $("div[data-target='#collapse-tenure']").parent('div.panel-info').hide(); //hide Tenure } }); //display tenure when select 'for Sale' on page loaded if($('select[name="property-type"]').val() == 'For Sale'){ $("div[data-target='#collapse-tenure']").parent('div.panel-info').show(); //show Tenure } }
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
Our next available supporter will start replying to tickets in about 0.14 hours from now. Thank you for your understanding.
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
- | 12:00 – 17:00 | 12:00 – 17:00 | 12:00 – 17:00 | 12:00 – 17:00 | 12:00 – 17:00 | - |
- | 18:00 – 21:00 | 18:00 – 21:00 | 18:00 – 21:00 | 18:00 – 21:00 | 18:00 – 21:00 | - |
Supporter timezone: Asia/Karachi (GMT+05:00)
Tagged: Types plugin, Views plugin
This topic contains 6 replies, has 2 voices.
Last updated by Akhil 7 years, 1 month ago.
Assisted by: Noman.
Hi Noman, as requested ,
the login that you have its valid.
the code is at wp archieve : hidden link
JS code is at filter editor section , current code is for checkbox. i need it for select option field.
thanks.
Hi,
Thanks for details, is it on that same page that we were working on landed-houses, this one?
hidden link
"select option field" -- For which particular field you need it for, please kindly mention name or slug of the field so I can easily find it, there are various fields.
Thank you
Hi Noman, yes its the same part.
the field is " property type" . thanks.
Acccordion "Tenure" show first.
then if property type = for sale Show Acccordion "Tenure"
if property type = for rent Hide Acccordion "Tenure"
thanks.
Hi Noman,
pls let me know if you need more details on this. thanks.
Thanks for providing details. I believe I have it all now. I am working on it and will update you with my findings.
Thank you
Hello,
I’ve updated following code for select option:
//display tenure only when select 'For Sale' function display_tenture(){ $("div[data-target='#collapse-tenure']").parent('div.panel-info').hide(); //hide Tenure $('select[name="property-type"]').change(function(){ if(this.value == 'For Sale') { $("div[data-target='#collapse-tenure']").parent('div.panel-info').show(); //show Tenure } else{ $("div[data-target='#collapse-tenure']").parent('div.panel-info').hide(); //hide Tenure } }); //display tenure when select 'for Sale' on page loaded if($('select[name="property-type"]').val() == 'For Sale'){ $("div[data-target='#collapse-tenure']").parent('div.panel-info').show(); //show Tenure } }
Please check the page now.
Thank you
Excellent ! Thanks. this is the line i was looking for
" if($('select[name="property-type"]').val() == 'For Sale') "
I shall close this ticket now.
Thank you very much for prompt reply Noman !