Our open roles
Once you've structured your page, added our script, and added all the attributes you'll need to add the following JavaScript right before our script and replace the slug with your own organizations slug.
<script>
const ghSlugh = "webflow";
</script>The select element above has an attribute of data-gh="filter". The only option you need to add to the list is "All Teams" with a value of all. The code will add each department here when the page loads. This will let site visitors filter the open roles by department.
The element below has an attribute of data-gh="loading". On the working page this is hidden by default with a combo class that lowers the opacity. This should be a sibling to your root element. It's important that your loading element has a combo class of hidden. The custom code will remove it to display your loading element.
Once all the listings have been added to the page the code will remove this from the DOM. Note: for this example we're using a static image, but the live site has an animated loader.
The element below has an attribute of data-gh="root" and this is where our department sections are added. A section is created using the highlighted section below for each department and then placed in the root element by the JavaScript.
It's important to make sure this element has a combo class of hidden that sets the opacity to 0. The code will remove this combo class to display the root when all the jobs have been added to the page.
Although visible on this page, the placeholder div below is hidden on the working page. Inside this div, ideally we have a section. This section should have a custom attribute of data-gh="section-wrapper". When the page is loaded the section or element on the page with this attribute will cloned for each department in your Greenhouse org. This element should have a heading with an attribute of data-gh="section-heading".
Also inside this section is an element that represents what a job listing will look like. This should have an attribute of gh-data="listing". You can see in our example we're using an unordered list. We recommend you use a list element as well. You can make the list display grid, flex, or whatever you prefer. The element you want your items to live in should have an attribute of data-gh="container". And then your job title will need an attribute of data-gh="job-title" while the job location gets an attribute of data-gh="location".
Since we're using attributes, you can have some freedom of structure and complete freedom with the class names. One thing to note in our implementation is that the job title and the job location are each wrapped in a separate divs. They have attributes of data-label="role" and data-label="location". We've added custom CSS and are using ::before on mobile landscape and down to add the role and location labels for each item and hiding the sticky label row that appears on desktop.
<style>
@media screen and (max-width: 767px) {
[data-label="role"]::before {
content: attr(data-label) ": ";
font-weight: 700;
text-transform: uppercase;
}
[data-label="location"]::before {
content: attr(data-label) ": ";
font-weight: 700;
text-transform: uppercase;
}
}
</style>Once all the listings have been added to the page the code will remove this from the DOM.
Heading
- This is some text inside of a div block.