New coder - How to contain style to one section of site


#1

Hi All,

I am learning some coding basics to supplement my design work in Squarespace. I am trying to add collapsible FAQs to the bottom of this page, but am having difficulties keeping the style from changing the format of the rest of the page.

Specifically, when I add the code, the collapsible text works (yay!), but a bar appears at the top of the page and the About Us drop-down menu shows a small box behind it. When you navigate to other pages, this function follows you until you refresh on a new page.

What could be causing this, and are there any solutions? I appreciate any guidance that you can provide. Thank you!

Here is the code I am injecting into my page:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /><script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

                    
<div data-role="main" class="ui-content">
  <div data-role="collapsible">
    <h4>What is a typical call like?</h4>
    <p>Before our call, we will decide on a topic for the call and set a working agenda. We will try to stay on topic during the call, but can cover anything else that would be beneficial to you during our session. At the end of the call, we can decide if a follow up call would be beneficial to discuss results or to cover a related topic.</p>
  </div>
  <div data-role="collapsible">
    <h4>What if I have a detailed technical question?</h4>
    <p>Our team has a wide knowledge base of online advertising platforms and strategies. That said, there may be some topics that are highly specialized that would require some research. We will try to get you an answer during our call or follow up if we are unable to help immediately. If we feel that we would be unable to provide you with sufficient value on our call, we will let you know before it's scheduled so we don't take up your time.</p>
  </div>
  <div data-role="collapsible">
    <h4>Are there any contracts?</h4>
    <p>Before we talk, we'll send over our general policies and will require acknowledgement of them. However, our calls will be scheduled as needed and you are not bound to schedule any additional calls (unless you want to).</p>
  </div>
  <div data-role="collapsible">
    <h4>What if I want to set up recurring calls?</h4>
    <p>That's great! We think you'll get the best results from continuing discussions to check performance, get further recommendations, and discuss new marketing ideas. We will set up a recurring schedule (often bi-weekly) so you can plan around our calls.</p>
  </div>
  <div data-role="collapsible">
    <h4>What if I decide that I need more help?</h4>
    <p>We can walk you through whatever you're working on, or we can do it for you under one of our service plans. We'll recommend a plan that will fit your needs and can get you set up as soon as possible.</p>
  </div>
  <div data-role="collapsible">
    <h4>How do I pay? What payment methods are accepted?</h4>
    <p>After our call, we'll send you a follow-up email with a summary of our discussion and an invoice. If you decided to schedule recurring calls, the invoice will include a retainer for any additional calls that month. We want to minimize the administrative burden on you and strive to make the process as seamless as possible. From your invoice, you'll be able to make an online payment using: Visa, MasterCard, American Express, JCB, Discover, and Diners Club cards.</p>
  </div>
</div>