Moodle 3.x LMS: Show/Hide Profile Sections and Fields

Update: Looking for techniques for Moodle 4.x? See Moodle 4.x LMS: Show/Hide Profile Sections and Fields.

Do you want to have better control of the sections and fields that appear when users create a new account and edit their profile pages in Moodle? This can often be desirable, especially if you find that people are either confused, overwhelmed or are simply not filling out the information you were hoping to capture.

In this article, we will look at techniques to:

• Identify the ID of a section;
• Identify individual field IDs;
• Automatically expand (open) sections that are collapsed by default;
• Hide unwanted sections completely; and
• Hide unnecessary fields.

Customizing your Moodle LMS profile sections and fields will result in a more positive user experience and encourage your learners to keep their profile information current.

The following techniques have been tested on Moodle 3.9, 3.10 and 3.11 with the Boost, Classic, Trema, Moove, Adaptable, Fordson, eGuru, Klass, EnlightLite and may work with many other themes. However, you may need to adapt it for other versions of Moodle and other themes, especially premium ones. Some themes, such as GCWeb, already include settings to control the visibility of some sections and profile fields. If your theme provides settings to control the visibility of these fields, use those instead.

Important: Never hide a section that contains required fields. If you do, users may not be able to submit (save) the form if the fields are empty. Also note that this technique does not affect the visibility of fields in the mobile app, only when accessed from a web browsers.

Find the ID of a section

The first thing we need to do is to identify the ID associated with the sections you want to hide. Navigate to the Create User or Edit Profile page and right-click on the label of the section and select Inspect. In the following example, we want to identify the ID of the section called Additional name.

If you right-click on Additional names and select Inspect, you will see something that looks like this:

The section id will start with id_moodle_…, in this case, id_moodle_additional_names.

Section name IDs typically include:

• User Picture: id_moodle_picture
• Additional Names: id_moodle_additional_names
• Interests: id_moodle_interests
• Optional: id_moodle_optional

If you created additional sections of fields, they will be given a generic name id, regardless of what the field is called, such as id_category_1, id_category_2, etc.

With the correct section ID in hand, you will be able to either:

• Expand collapsed sections by default; or
• Completely hide a section.

Find the ID of a field

Let’s say you have a school where all users are located in the same timezone: America/Toronto. There would be no point in including a profile field for this. Not only would it be redundant and clutter up the listed profile fields, but a student might change it resulting in incorrect time-related information being displayed, such as deadlines.

Fortunately, the same technique can be used to find the ID of an individual field too. In this case, right-click on the field name Timezone or the field name itself and select Inspect.

Because we are looking for a field instead of a section, we are looking for the UD which beings with fitem_id_… :

In this case, the id we are looking for is fitem_id_timezone.

Common IDs for standard Moodle profile fields that you might want to hide include:

• Email display: fitem_id_maildisplay
• MoodleNet Profile: fitem_id_moodlenetprofile
• City: fitem_id_city
• Country: fitem_id_country
• Timezone: fitem_id_timezone
• Description: fitem_id_description
• First name – phonetic: fitem_id_firstnamephonetic
• Last name – phonetic: fitem_id_lastnamephonetic
• Middle name: fitem_id_middlename
• Alternate name: fitem_id_alternatename
• ID number: fitem_id_idnumber
• Institution: fitem_id_institution
• Department: fitem_id_department
• Phone: fitem_id_phone
• Mobile phone: fitem_id_phone2
• Address: fitem_id_address

Moodle 3.2 to 3.10 also include these additional fields:

• Web page: fitem_id_url
• ICQ number: fitem_id_icq
• Skype ID: fitem_id_skype
• AIM ID: fitem_id_aim
• Yahoo ID: fitem_id_yahoo
• MSN ID: fitem_id_msn

Moodle 3.2 to 3.11 can also potentially include custom profile fields. These IDs will be prefixed by fitem_id_profile_field_.

With the individual field ID in hand, you will be able to hide the field in the profile form.

Automatically expand a collapsed Moodle Profile Sections by default

Logged-in as a Moodle Administrator, you can easily make a section to be expand by default using a little JavaScript. Navigate to Site Administration > Appearance > Additional HTML and add the following lines of JavaScript into the Before Body is Closed field:

<script>
if (document.getElementById('page-login-signup') || document.getElementById('page-user-editadvanced')) {
   document.getElementById('id_moodle_additional_names').classList.remove("collapsed");
   document.getElementById(' id_moodle_additional_names').classList.remove("collapsible");
}
</script>

Explanation: This JavaScript will expand the Additional Names section on both the Sign-up page and the Edit Profile page.

• The line which begins with if  just checks to make sure you are on the sign-up or edit profile page.
• The line that ends with “collapsed”); will expand the collapsed Additional Names section.
• The line that ends with “collapsible”); will remove the ability for the Additional Names section to be collapsed again. This optional line can be omitted if you want the user to still be able to collapse the section.

If there is more than one section that you would like to automatically expand, add additional sets of both lines starting with document.getElementByID…. Example:

<script>
if (document.getElementById('page-login-signup') || document.getElementById('page-user-editadvanced')) {
   document.getElementById(' id_moodle_interests').classList.remove("collapsed");
   document.getElementById(' id_moodle_interests').classList.remove("collapsible");
   document.getElementById(' id_moodle_optional').classList.remove("collapsed");
   document.getElementById(' id_moodle_optional').classList.remove("collapsible");
}
</script>

This will expand both the Interests and the Optional sections. Reminder that the lines ending in classList.remove(“collapsible”); are optional.

Automatically Hiding Moodle Profile Sections

It is possible to completely hide one or more unwanted sections or individual fields within a section on the Sign-in and Edit Profile pages by adding CSS to your theme. For example, these two lines of CSS would be used to hide the Additional Names section:

#page-login-signup #id_additional_names {display: none;}
#page-user-editadvanced #id_additional_names {display: none;}

You will need a set of both CSS lines for each section or field that you want to hide, one for the Create Account page and the other for the Edit Profile page.

Hiding Specific Moodle Profile Fields

You can hide one or more specific profile fields instead of a whole section. Start by identifying the ID of the field you want to hide. Once you have that, hiding one or more fields is very much the same as previously described for hiding a section of fields except that you specify the ID of the field group instead of the section. In the case of hiding a field, you always want to find the ID that is prefixed with “fitem_”. Example: fitem_id_address, not just id_address.

To hide the Address field, you would add the following lines to your theme’s CSS:

#page-login-signup #fitem_id_address {display: none;}
#page-user-editadvanced #fitem_id_address {display: none;}

Minimal Profile Page using CSS

Here is an example of a clean and minimal profile page that hides most of the optional sections and fields using CSS. You can add this to your theme’s setting in a field often called CSS or SCSS.

/* Hide the Email display profile field in the General section. */
#page-login-signup #fitem_id_maildisplay,
#page-user-editadvanced #fitem_id_maildisplay,

/* Hide the MoodleNet profile field in the General section. */
#page-login-signup #fitem_id_moodlenetprofile,
#page-user-editadvanced #fitem_id_moodlenetprofile,

/* Hide the City/Town profile field in the General section. */
#page-login-signup #fitem_id_city,
#page-user-editadvanced #fitem_id_city,

/* Hide Country profile field in the General section. */
#page-login-signup #fitem_id_country,
#page-user-editadvanced #fitem_id_country,

/* Hide the Timezone profile field in the General section. */
#page-login-signup #fitem_id_timezone,
#page-user-editadvanced #fitem_id_timezone,

/* Hide the Description profile field in the General section. */
#page-login-signup #fitem_id_description_editor,
#page-user-editadvanced #fitem_id_description_editor,

/* Hide the User Picture section. */
#page-login-signup #id_moodle_picture,
#page-user-editadvanced #id_moodle_picture,

/* Hide the Additional names section. */
#page-login-signup #id_moodle_additional_names,
#page-user-editadvanced #id_moodle_additional_names,

/* Hide the Interests section. */
#page-login-signup #id_moodle_interests,
#page-user-editadvanced #id_moodle_interests,

/* Hide Optional section. */
#page-login-signup #id_moodle_optional,
#page-user-editadvanced #id_moodle_optional,

/* Hide the first custom section - if you created one. */
#page-login-signup #id_category_1,
#page-user-editadvanced #id_category_1,

.nodisplay { /* The .nodisplay class is just a placeholder. */
    display: none!important;
}

If you prefer, using the following JavaScript instead of the previous CSS has the advantage of actually removing the fields from the form instead of just hiding them. Navigate to Site Administration > Appearance > Additional HTML and add the following lines of JavaScript into the Before Body is Closed field:

<script>
if (document.getElementById('page-login-signup') || document.getElementById('page-user-editadvanced')) {
    // Hide the Email display profile field in the General section.
    document.getElementById('fitem_id_maildisplay').remove();

    // Hide the MoodleNet profile field in the General section.
    document.getElementById('fitem_id_moodlenetprofile').remove();

    // Hide the City/Town profile field in the General section.
    document.getElementById('fitem_id_city').remove();

    // Hide Country profile field in the General section.
    document.getElementById('fitem_id_country').remove();

    // Hide the Timezone profile field in the General section.
    document.getElementById('fitem_id_timezone').remove();

    // Hide the Description profile field in the General section.
    document.getElementById('fitem_id_description_editor').remove();

    // Hide the User Picture section.
    document.getElementById('id_moodle_picture').remove();

    // Hide the Additional names section.
    document.getElementById('id_moodle_additional_names').remove();

    // Hide the Interests section.
    document.getElementById('id_moodle_interests').remove();

    // Hide Optional section.
    document.getElementById('id_moodle_optional').remove();

    // Hide the first custom section - if you created one.
    // Only include this if you actually have a custom section that you want to remove.
    // Otherwise, it will cause a JavaScript error.
    document.getElementById('id_category_1').remove();
}
</script>

Final thoughts

If you intend to hide all of the fields in a section, it is not necessary to hide each field in the section. Simply hide the whole section as this will also remove the fields.

Custom profile fields come with a setting to control the visibility of the field. Use these settings to hide fields instead of JavaScript or CSS. Remember that most of these techniques only hide the fields, they don’t remove them from the page.

You can practice applying these changes to the current version of Moodle before applying them to your own Moodle site by going to the official Moodle Sandbox Demo site at https://sandbox.moodledemo.net/

Hope you find this information helpful in cleaning up your Moodle profile pages, simplifying and making account creation and maintenance simpler and easier for your users. Post a comment if you have any questions.

See you next month!

Michael Milette

• About
• Latest Posts

Follow me

Michael Milette

Consultant at TNG Consulting

Michael Milette is the owner and an independent consultant with TNG Consulting Inc. in Canada. He works with government, non-profit organizations, businesses and educational institutions on Moodle-related projects. Michael writes about implementing Moodle LMS, developing in Moodle, Moodle administration, using the FilterCodes plugin (his own project), creating multi-language Moodle implementations and courses, and WCAG 2.1 accessibility.

Follow me

Latest posts by Michael Milette (see all)

• Moodle LMS Email Deliverability in 2024: Best Practices, Authentication Standards and Troubleshooting – 23rd February 2024
• Terminology for Those New to Moodle LMS – 20th January 2024
• Enhancing E-Learning in Moodle LMS with an AI Chat Block and FilterCodes – 20th November 2023