Toggle Visibility of Separate Javascript Files on Same Page

  • I have two separate javascript files that I would like to load on a single page, but toggle visibility/display of either based on radio button input. The JS is provided by a 3rd party and is offsite. Their provided code is this:
    <script src="https://toolkit.rescuegroups.org/j/3/FzemP6HU/toolkit.js"></script>
    and
    <script src="https://toolkit.rescuegroups.org/j/3/4ANRW3x8/toolkit.js"></script>
    Each file presents a separate set of filtered results from their database. How can I incorporate both onto a page but only have one or the other showing based on a radio button form input. I would like the page to start off with nothing visible (hopefully giving time for both JS to load in the background while the user selects an option) and then show one or the other depending on what they selected.

    You can see a single one of these in action at https://pricelesspetrescue.org/adoptable-dogs/. I’m trying to incorporate the use of an additional file on that same page based on input from the user and only showing one or the other rather than both.

Viewing 1 replies (of 1 total)
  • Thread Starter mfrethy

    (@mfrethy)

    I have tried to manage the following with mixed results

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript'>
function displayForm(c) {
    if (c.value == "2") {
        jQuery('#claremontdogContainer').toggle('show');
        jQuery('#chdogContainer').hide();
    }
        if (c.value == "1") {
         jQuery('#chdogContainer').toggle('show');
         jQuery('#claremontdogContainer').hide();
    }
};
</script>

<label>Please select a location to view:</label>
<form>
    <input value="1" type="radio" name="formselector" onClick="displayForm(this)"></input>Chino Hills
    <input value="2" type="radio" name="formselector" onClick="displayForm(this)"></input>Claremont
</form>

    <div style="display:none" id="chdogContainer">
    <script src="https://toolkit.rescuegroups.org/j/3/FzemP6HU/toolkit.js"></script>
    <script type="text/javascript">
    </script>
    </div>

    <div style="display:none" id="claremontdogContainer">
    <script src="https://toolkit.rescuegroups.org/j/3/4ANRW3x8/toolkit.js"></script>
    <script type="text/javascript">
    </script>
    </div>

    This gets pretty close to what I need. The problem I have is the jquery seems to conflict with the JS they provide. It will display the initial result but does not carry any of the functionality that it should have. https://pricelesspetrescue.org/test-page/ Nothing is clickable inside those results and should be.

    Been searching through various similar posts and the wordpress codex and…and…I just haven’t been able to come up with anything that seems close enough to what I’m looking for to make the answer click in my head.

Viewing 1 replies (of 1 total)
  • The topic ‘Toggle Visibility of Separate Javascript Files on Same Page’ is closed to new replies.