Title: Setting Dynamic Field Width Classes with JQuery
Last modified: January 9, 2025

---

# Setting Dynamic Field Width Classes with JQuery

 *  Resolved [eberkland](https://wordpress.org/support/users/eberkland/)
 * (@eberkland)
 * [1 year, 5 months ago](https://wordpress.org/support/topic/setting-dynamic-field-width-classes-with-jquery/)
 * I have several rows with dropdown fields that calculate the price of products.
   Each product does not need the same number of dropdown fields based on dependencies.
   I am trying to change the field width classes dynamically (e.g. col-xs-2, col-
   sm-2…etc.) so there is no gap when I hide the fields I don’t need. Here is the
   setup:
    - Fieldname65 (Category) is a dropdown with five selections
    - Fieldname66 (Filter) is a dropdown dependent on Fieldname65
    - Fieldname68 (Unit Price) is a dropdown dependent on Fieldname66
 * What I am trying to do:
    - IF “panels” is selected in Fieldname65, show Fieldname66 AND Fieldname68 and
      set all col values to 2.
    - IF anything ELSE is selected in Fieldname65, hide Fieldname66 and set col 
      values for Fieldname68 to 4 for all other selections.
 * Here is the code I have, I am able to hide and show fields but not change classes:
 *     ```wp-block-code
       (function () {    // Retrieve the selected value from fieldname65    var selectedValue = fieldname65|v; // Properly retrieve the value of fieldname65    // Ensure consistent initial classes for fields    jQuery(fieldname66).addClass("col-xs-2 col-sm-2 col-md-2 col-lg-2"); // Set the default initial class for fieldname66    jQuery(fieldname68).addClass("col-xs-2 col-sm-2 col-md-2 col-lg-2"); // Set the default initial class for fieldname68    // Update field visibility and styles based on the selected value    if (selectedValue === "panels") {        // Activate and style field 66        SHOWFIELD(66);        jQuery(fieldname66).removeClass("col-xs-2 col-sm-2 col-md-2 col-lg-2").addClass("col-xs-2 col-sm-2 col-md-2 col-lg-2");        // Activate and style field 68        SHOWFIELD(68);        jQuery(fieldname68).removeClass("col-xs-2 col-sm-2 col-md-2 col-lg-2").addClass("col-xs-2 col-sm-2 col-md-2 col-lg-2");    } else {        // Ignore and style field 66        HIDEFIELD(66);        jQuery(fieldname66).removeClass("col-xs-2 col-sm-2 col-md-2 col-lg-2").addClass("col-xs-4 col-sm-4 col-md-4 col-lg-4");        // Ignore and style field 68        SHOWFIELD(68);        jQuery(fieldname68).removeClass("col-xs-2 col-sm-2 col-md-2 col-lg-2").addClass("col-xs-4 col-sm-4 col-md-4 col-lg-4");    }})();
       ```
   
 * Let me know if I am on the right track or if you have any other suggestions. 
   Thanks.

Viewing 1 replies (of 1 total)

 *  Plugin Author [CodePeople2](https://wordpress.org/support/users/codepeople2/)
 * (@codepeople2)
 * [1 year, 5 months ago](https://wordpress.org/support/topic/setting-dynamic-field-width-classes-with-jquery/#post-18235229)
 * Hello [@eberkland](https://wordpress.org/support/users/eberkland/)
 * In the equation context, if you want to access the field jQuery object, the correct
   code would be:
 *     ```wp-block-code
       getField(fieldname66|n).jQueryRef().removeClass("col-xs-2 col-sm-2 col-md-2 col-lg-2").addClass("col-xs-2 col-sm-2 col-md-2 col-lg-2");
       ```
   
 * You can use the same format to refer to the names of the fields in the equations
   with the SHOWFIELD and HIDEFIELD operations:
 *     ```wp-block-code
       SHOWFIELD(fieldname68|n);
       ```
   
 * Bet regards.

Viewing 1 replies (of 1 total)

The topic ‘Setting Dynamic Field Width Classes with JQuery’ is closed to new replies.

 * ![](https://ps.w.org/calculated-fields-form/assets/icon-256x256.jpg?rev=1734377)
 * [Calculated Fields Form](https://wordpress.org/plugins/calculated-fields-form/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/calculated-fields-form/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/calculated-fields-form/)
 * [Active Topics](https://wordpress.org/support/plugin/calculated-fields-form/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/calculated-fields-form/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/calculated-fields-form/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [CodePeople2](https://wordpress.org/support/users/codepeople2/)
 * Last activity: [1 year, 5 months ago](https://wordpress.org/support/topic/setting-dynamic-field-width-classes-with-jquery/#post-18235229)
 * Status: resolved