Dynamically add parameters to WP_Query based on user click

Hello

I am working on a “single page” style website that serves up images using the jQuery Flexslider.

I would like to have nav/widget elements that a user can click, and reload the flexslider page part using different filtering criteria on the loop.

What is the best way to do this?

Right now I have been playing around with the concept of having a hidden DOM element, that gets updated with user click parameter using JS. Then the idea is to get a hook to the element as a parameter in the loop and reload the flexslider page part accordingly.

This is proving difficult, as my attempts to hook into the element with PHP’s DOMDocument->getElementByID is returning null. Something like this in functions.php….

function get_current_project(){

    $doc = new DOMDocument();

    $doc->validateOnParse = true;

    $doc->loadHTML(get_template_directory_uri() . '/header.php');

    $doc->preserveWhiteSpace = false;

    $project_type = $doc->getElementById( 'current-project' );

    return $project_type->value;
}

I have spent hours messing around with this approach, and just wanted to stop and see if there is a better way to do this (or if what I am doing is futile!)

Any ideas and alternatives are welcome.

Thank You!