How to expand all the hidden fields (in one step) present in any website using python selenium web driver

I am trying to expand all the hidden fields present in any specific web page of a website, but I was able to do one after the another. Also, this code snippet is not generalized for any websites.

How to write a generalized code which can expand all the hidden fields of a particular web page of any websites?

Code snippet for a sample website:

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager

service = Service(executable_path="chromedriver.exe")
options = webdriver.ChromeOptions()
driver = webdriver.Chrome(service=service, options=options)

driver.get('https://kpmg.com/xx/en/home/about/offices.html')

driver.find_element(By.XPATH, "//*[@id='country24-accordion']").click()

Sample hidden fields image:

This is an interesting question. Before going ahead, it’s worth considering if you can use any other alternatives to access the contents of the expandable sections. For example, you can access the text within the accordion sections without expanding them (though it may need formatting) e.g.:

elements = driver.find_elements_by_class_name(".accordion-collapse")

for element in elements:
    print(element.get_attribute("innerText"))

Ok, moving on: the page you’re accessing uses javascript to force only one accordion section to be expanded at once. And Selenium can only perform click actions in a sequential order; it would not allow you to simultaneously click or expand all the accordion sections at once. This is because Selenium is mostly intended to simulate user actions, instead of manipulating the DOM more directly as you would with javascript.

However you can invoke javascript from within Selenium to expand all the sections at once. If you inspect the accordion element in the DOM each time you expand & collapse an accordion section, you will notice the style attribute changing.

When you click to collapse an accordion, the style attribute changes to:

style="display: none;"

Which changes as follows when you click again to expand:

style="display: block;"

Hence you can use javascript to modify the attributes of all the accordion elements to be expanded simultaneously. You can try the following in the browser console:

var accordionContents = document.querySelectorAll('.accordion-collapse');

accordionContents.forEach(function(content) {
    content.style.display = 'block';
});

Note: the aria-expanded attribute value also changes with expands/collapses but isn’t mandatory for expanding the accordions as shown. However for completeness, it’s worth changing this value also.

Now applying the above in Selenium, you can add something like:

js_code = ```
    var accordionContents = document.querySelectorAll('.accordion-collapse');

    accordionContents.forEach(function(content) {
    content.style.display = 'block';
});```

driver.execute_script(js_code)

Hope that helps!