Problem with adding hide/show text to cms

Problem with adding hide/show text to cms

Hi
I'm very new to Jquery and am trying to add a jquery effect hide and show to my web page where I have a lot of text. This is the code:


<!DOCTYPE html>
<html>
<head>
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

The problem is that I use a cms that a cowboy web developer has built and if I ever need any help he just never answers the phone so I am left to tackle the website alone. The cms is a bespoke one built by my web designer.
The page on my website features a lot of text at the top, when I add the code into my cms all the text and the top banner vanish on the whole page, so all the pricing on all my products and also all the product descriptions!

Why is this?

Lisa