web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Welcome to the Power Platform Communities
Season of Giving Solutions is Here!
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages / Show/Hide Section base...
Power Pages
Answered

Show/Hide Section based on Yes/No toggle - JavaScript

(0) ShareShare
ReportReport
Posted on by Community Power Pla...

Hi All, 

 

I have a webform with two sections, one with a toggle Yes/No and in the other section i have a 5 fields 

 

i want to hide the section when the toggle is at default "No" and show the section when the switched to "Yes", 

 

the form is hiding at default but not showing when i switch to yes 

 

what am i missing in the code below??

 

$(document).ready(function () {
debugger;
onDisplaySectionChange();
showHideFieldsandTab();

});

function showHideFieldsandTab() {
$("#callingonbehalfof").change(onDisplaySectionChange);
}

function onDisplaySectionChange() {
if ($("#callingonbehalfof").val() != "Yes") {
$(".section[data-name='Your_Information']").closest("fieldset").show();
$(".section[data-name='Your_Information']").closest('fieldset').find("input[type=text], textarea").val("");
$(".section[data-name='Your_Information']").closest('fieldset').find("select").val('selected');
}
else {
$(".section[data-name='Your_Information']").closest("fieldset").hide();
};

 

Any help would be great 

 

Many thanks 

Categories:
Power Apps portals
I have the same question (0)
  • Community Power Platform Member Profile Picture
    Community Power Pla... on at

    @OliverRodrigues  - Mate your legend!! 

     

    its now working 🙂 

     

    i did also change the radio box to a dropdown and that also worked 🙂 

     

    thank you so much for you help 🙂 

  • Verified answer
    oliver.rodrigues Profile Picture
    oliver.rodrigues 9,368 Most Valuable Professional on at

    Hi

    try the following:

    $(document).ready(function () {
 debugger;
 onDisplaySectionChange();
 showHideFieldsandTab();

});

function showHideFieldsandTab() {
 $("#iii_callingonbehalfof").change(onDisplaySectionChange);
}

function onDisplaySectionChange() {
 var selectedValue = GetRadioSelectedValue($('#iii_callingonbehalfof'));
 if (selectedValue != "1") {
 $("table[data-name='Your_Information']").parent().show(); /// and .hide();
 }
 else {
 $("table[data-name='Your_Information']").parent().hide(); /// and .hide();;
 }
}

GetRadioSelectedValue = function(input) {

 if (!!$(input).find("input[type=radio]")) {
 var controlName = $(input).find("input[type=radio]").first().attr("name");
 if (!!controlName) {
 return $("input[name='" + controlName + "']:checked").val();
 }
 }
 return "";
};
  • Community Power Platform Member Profile Picture
    Community Power Pla... on at

    Ahh ok cool i did think if i was using the wrong type on control 🙂

     

    sorry still a bit confused where would i put the new bit of code? do i need to replace something?

     

    var selectedValue = GetRadioSelectedValue($('#callingonbehalfof'))

      i really very new to Javascript :) like days new lol 

     

    Many Thanks

  • oliver.rodrigues Profile Picture
    oliver.rodrigues 9,368 Most Valuable Professional on at

    My bad, I didn't pay attention you were actually using a radio button instead of normal dropdownlist 

    (I might need a few more coffees to start the day here hahahahaha)

    and yes, the place you are adding your code is correct

     

    I have a generic function to get value for retrieving radio values:

    GetRadioSelectedValue = function(input) {

 if (!!$(input).find("input[type=radio]")) {
 var controlName = $(input).find("input[type=radio]").first().attr("name");
 if (!!controlName) {
 return $("input[name='" + controlName + "']:checked").val();
 }
 }
 return "";
};

     to use the function you can do the following:

    var selectedValue = GetRadioSelectedValue($('#callingonbehalfof'));
  • Community Power Platform Member Profile Picture
    Community Power Pla... on at

    Ahh ok cool still very new to me so i found the value set as "1"

     

    MartinPAChamp_0-1594285127621.png

     

    So i have changed the code 

     

    $(document).ready(function () {
debugger;
onDisplaySectionChange();
showHideFieldsandTab();

});

function showHideFieldsandTab() {
$("#iii_callingonbehalfof").change(onDisplaySectionChange);
}

function onDisplaySectionChange() {
if ($("#iii_callingonbehalfof").val() != "1") {
$("table[data-name='Your_Information']").parent().show(); /// and .hide();;

}
else {
$("table[data-name='Your_Information']").parent().hide(); /// and .hide();;
}}

     

    also just to double check am i putting the code in correct area? 

     

    MartinPAChamp_1-1594285337567.png

     

  • oliver.rodrigues Profile Picture
    oliver.rodrigues 9,368 Most Valuable Professional on at

    the value "993480000" was just an example

     

    you need to know the value for your optionset, you can discover that through a few different ways:

     

    • navigate to the solutions which you created the optionset, go to the field properties and click on the option set option you need, and check the value
    • (sort of cheating but maybe easier) just inspect the optionset element directly in your page and you will be able to see the values

    optionset.PNG

  • Community Power Platform Member Profile Picture
    Community Power Pla... on at

    Morning @OliverRodrigues 

     

    Iv have tried the code below 

     

    $(document).ready(function () {
debugger;
onDisplaySectionChange();
showHideFieldsandTab();

});

function showHideFieldsandTab() {
$("#iii_callingonbehalfof").change(onDisplaySectionChange);
}

function onDisplaySectionChange() {
if ($("#iii_callingonbehalfof").val() != "993480000") {
$("table[data-name='Your_Information']").parent().hide(); /// and .hide();;

}
else {
$("table[data-name='Your_Information']").parent().show(); /// and .hide();;
}}

     

    the section is hidden but the toggle doesn't work 😞

     

    MartinPAChamp_0-1594282329504.png

    MartinPAChamp_1-1594282348007.png

    am i using the correct code for the toggle? 

     

    if ($("#iii_callingonbehalfof").val() != "993480000")

     

    Many Thanks for you help 🙂

  • oliver.rodrigues Profile Picture
    oliver.rodrigues 9,368 Most Valuable Professional on at

    maybe this line you are getting it wrong:

    if ($("#iii_callingonbehalfof").val() != "Yes") {

    you should have the optionset value there, not the label.. something like:

    if ($("#iii_callingonbehalfof").val() != "993480000") {

     

  • Community Power Platform Member Profile Picture
    Community Power Pla... on at

    Yes but doesn't seem to be working 😞

     

    any ideas what i could be doing wrong? 

  • oliver.rodrigues Profile Picture
    oliver.rodrigues 9,368 Most Valuable Professional on at

    Hi, yes, that code should work

     

    have you tried ? 

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities
Season of Giving Solutions is Here!

Quick Links

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Congratulations to the December Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Pages

#1
Fubar Profile Picture

Fubar 58 Super User 2025 Season 2

#2
Jerald Felix Profile Picture

Jerald Felix 27

#3
Lucas001 Profile Picture

Lucas001 25 Super User 2025 Season 2

Last 30 days Overall leaderboard

Featured topics

Solution to LinkedIn Authentication in Power Apps Portals
Welcome to the Power Pages forum!

Product updates

Microsoft Power Platform Community release plans