AMPScript/jQuery conflict

Question

I have a landing page that has a conflict because we are referencing the same content via AMPScript and via jQuery, I'll preface this with saying, I have not put in the full code, because I am hoping someone is familiar with this issue. Each part work individually but when I put it all together it causes an error.

The landing page is dynamic and the AMPScript tells the page which content block to render based on a specific subscriber attribute through and IF/ELSE functions, the jQuery, is for a drop-down navigation in case the prospect is interested in viewing information on our other programs:

$(document).ready(function(){
    $("button#HCMnav").click(function(){
        $(".show").removeClass("show").addClass("hide");
        $("#HCM").addClass("show");
    });
    $("button#HITnav").click(function(){
        $(".show").removeClass("show").addClass("hide");
        $("#HIT").addClass("show");
    });

 <div class="show">
    %%[IF @ProgramCode == "Healthcare Management" THEN]%% 
          %%=ContentArea("17152166")=%% 
    %%[ELSEIF @ProgramCode == "Health and Human Services" THEN]%% 
          %%=ContentArea("17135272")=%% 
    <!-- Etc. -->
 </div>

<div class="hide" id="HCM">
 %%=ContentArea("17152166")=%% 
</div>

<div class="hide" id="HIT/">
  %%=ContentArea("17135272")=%% 
</div>

Both of these are referencing the same content blocks based on the program name, this is causing a conflict with an accordion functions in the content blocks themselves because we are essentially telling it to show and to hide the same content. I could easily create a duplicate set of content blocks for the JQuery to reference but I do not want to have to update in two places since that will inevitably cause issues some day.

Any suggestions?

Answer 1

There should not be any "conflict" between the two. The AMPScript is rendered server-side as the page loads and the jQuery is rendered and acts Client side. When the jQuery goes to work, all for the AMPScript is already rendered into HTML.

The most likely causes are either what appears to be a typo in your code where you write

<div class="hide" id="HIT/">

That forward slash should not be there. (I, of course, have never ever made a mistake like that, cough, cough)

Or if that is just an artifact of your posting, something is rendering in the content area that is messing with your jQuery.

Answer 2

You're missing an ENDIF in your AMPScript conditional. I also added in the script tag for clarity:

<script type="text/javascript">

  $(document).ready(function(){
    $("button#HCMnav").click(function(){
        $(".show").removeClass("show").addClass("hide");
        $("#HCM").addClass("show");
    });
    $("button#HITnav").click(function(){
        $(".show").removeClass("show").addClass("hide");
        $("#HIT").addClass("show");
    });

</script>    

<div class="show">
  %%[IF @ProgramCode == "Healthcare Management" THEN]%% 
        %%=ContentArea("17152166")=%% 
  %%[ELSEIF @ProgramCode == "Health and Human Services" THEN]%% 
        %%=ContentArea("17135272")=%% 
  %%[ENDIF]%%
  <!-- Etc. -->
</div>

<div class="hide" id="HCM">
  %%=ContentArea("17152166")=%% 
</div>

<div class="hide" id="HIT/">
  %%=ContentArea("17135272")=%% 
</div>

Also, it's way easier and more maintainable to use the ContentAreaByName() function instead of ContentArea().