Ajax Team Demo

by JeffS - @webdev in the WF Forums

This quick and simple demo uses a collection list displayed on the page and loads the full bio from each CMS Item via the CMS Template. It does not cache the data, just simply loads it. The panel on the right gets the injected bio unless the screen is smaller then a tablet. in that case the bio is injected below each collection list item so it is stacked. The layout is one example of a way to do this and there are many. The code is written to leverage jQuery since it's currently loaded on all projects. It is a good starting point if you need something similar.

I don't have the time to help you implement this on your own since I need to work to pay bills. I am available for hire. DM me in the forums for paid work.

Meet the Team

Rhett Lueilwitz

President

Aut consequuntur eum quia sapiente. Deleniti quaerat laudantium eos dolor. Eum veritatis alias sint. Eveniet quaerat et aperiam labo

View Profile

Jenifer Streich

Id voluptate ea fugit ut dolor similique dolores molestiae. Praesentium autem ipsum iure accusantium eligendi sint aut ass

View Profile

Jett Reynolds

Aperiam qui sit sit officia. Eos occaecati dolorum recusandae voluptates velit quaerat dignissimos. Possimus voluptas modi

View Profile

Emerald Labadie

In inventore facilis ut iste autem odio omnis quasi.

View Profile

Reymundo Predovic

Doloremque non ullam. Quod amet voluptatem repudiandae laborum eligendi vo

View Profile

View a profile to see more about each team member.

<> code


var Webflow = Webflow || [];
Webflow.push(function () {
    // DOMready has fired
    $('a.bio-url').each(function () {
        let bioUrl = $(this).attr("href");
        console.log(bioUrl);

        $(this).on("click", function (e) {
            let intViewportWidth = window.innerWidth;
            e.preventDefault();
            if ($('a.bio-url').hasClass("is-active")) {
                $('a.bio-url').removeClass("is-active");
            }
            if ($('.mobile-team-member-bio').text()) {
                $('.mobile-team-member-bio').text("");
            }

            if (!$(this).hasClass("is-active")) {

                $(this).addClass("is-active");

                if (intViewportWidth <= 767) {
                    $(this).siblings('.mobile-team-member-bio').load(bioUrl + " #bio");
                    $('.team-member-bio').text("");
                } else {
                    $('.team-member-bio').load(bioUrl + " #bio");
                };
            }

        });

    });
});
Button Text

Code assigns the "is-active" class when a view profile is clicked. This is here so you understand where the styling comes from. Normally a style guide would have this present so as not to get deleted when "cleaning unused classes".

Button Text