problem with display:none

I am running a javascript function on a page to make content appear and disappear when you click on buttons. I have the content contained in divs and both divs are set to “display: none;” to start…

this code has worked on other wordpress sites just fine…

on this site – the code makes the whole page disappear…
I have isolated it to the “display:none” css as when i remove that everything is fine…

here is the page: https://draperiesbysandi.com/measure-guide/

and the code that runs on page is here:

function measure_guide() {
if (is_page(93)) {

?>
<h1>Choose a Payment Type:</h1>

<style>
#container, #container2 {display: none;}

  #ebook1 {background-image: url('https://charismaarts.com/wp-content/uploads/2013/09/full_pay_blue.png'); color: transparent; background-repeat: no-repeat;
    border: none; font-size: 35px; line-height: 35px; background-color: transparent;}

    #collection {background-image: url('https://charismaarts.com/wp-content/uploads/2013/09/pay_paln_blue.png'); color: transparent; background-repeat: no-repeat;
    border: none; font-size: 35px; line-height: 35px; background-color: transparent;}

    #ebook1:hover {cursor: pointer;}
    #ebook1:visited {background-image: url('https://charismaarts.com/wp-content/uploads/2013/09/full_pay_green.png'); }

    #collection:hover {background-image: url('https://charismaarts.com/wp-content/uploads/2013/09/pay_plan_green.png'); cursor: pointer;}

</style>

<script>
function myFunction1c()
{

x=document.getElementById("container").style.display = "block";
x=document.getElementById("container2").style.display = "none";

}
</script>

<script>
function myFunction1b()
{

x=document.getElementById("container2").style.display = "block";
x=document.getElementById("container").style.display = "none";

}
</script>

<button class="ebook" id="ebook1" type="button" onclick="myFunction1c()">Payment</button>

<button class="collection" id="collection" type="button" onclick="myFunction1b()">Collection</button>

<div id="container">

Measure basic: 

(1) Please review basic information which applies to all window treatments.

*Take accurate measurements, using only a rigid steel tape measure, work in inches

 ( insert pic # 568)

* Determine what type of hardware you will be using, crucial factor

* Determine mounting location of your hardware. Ideally hardware should be mounted 3” 

(or more) beyond the windows wood trim or border

* Pay attention to details and identify all structural features that may influence your 

hardware placement , such as extra wall space needed for decorative finials, registers, 

pictures,light switches, etc.

(2) Follow specific measure guide for each type of treatment and/or design you have 

selected

</div>

<div id="container2">

Custom Drapery: 

(1) Please review basic information which applies to all window treatments.

*Take accurate measurements, using only a rigid steel tape measure, work in inches

 ( insert pic # 568)

* Determine what type of hardware you will be using, crucial factor

* Determine mounting location of your hardware. Ideally hardware should be mounted 3” 

(or more) beyond the windows wood trim or border

* Pay attention to details and identify all structural features that may influence your 

hardware placement , such as extra wall space needed for decorative finials, registers, 

pictures,light switches, etc.

(2) Follow specific measure guide for each type of treatment and/or design you have 

selected

</div>

<?php
}
}

add_action('thesis_hook_after_post','measure_guide');

[Moderator Note: Please post code or markup between backticks (not double quotes) or use the code button. Or better still – use a pastebin. Your posted code may now have been permanently damaged by the forum’s parser.]

for the life of me i cannot figure out why it is making page disappear; the “display none” should be confined to the divs only but for some bizarre reason is being applied to the whole page…

can anyone help?