used jQuery to make my div expand with new information but it overlaps other information on the page

Question

I have used J Query to make my div expand with new information but it overlaps other information on the page, can any one help resolve this issue? I have only coded the first div to get it working before i do the rest.

Here is the fiddle for my code: http://jsfiddle.net/G59nH/

HTML:

<div class="contentBox2">
    <div class="servicesBox">
        <p>
            <b><u>Personal Breakthrough Sessions</u></b>
            <br>
            <i>“The secret of change is to focus all of your Energy, not on fighting the old, but on building the new.”</i>
            <br>
            <b>
                Socrates  &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;    

                <a id="clickme" href="#"><u>Read more</u></a><br />
                <div id="PBScontent" class="commenthidden">
                    You know when you are ready to breakthrough what has been holding you back to be and do something more. A Breakthrough Session is one full day or 2 half days (within 2 days) where Louise supports you through identifying what has been limiting you and then by using the tools from Strategic Intervention, NLP, Time Line Therapy and Hypnosis training, helps you break down the barriers and create new options to start you on a journey to achieve what you want. Louise will work with you to devise a plan, and making you accountable by requesting that some immediate action is taken, as accountability is put in place. In addition will arrange follow – up sessions to determine how you are progressing, holding the client accountable for planned actions. A worthwhile investment to lasting change and success in all areas of your life.
                </div>
            </b> 
        </p>
    </div>

    <div class="servicesBox">
        <p>
            <b><u>Relationship and Family Coaching</u></b>
            <br>
            <i>“A real decision is measured by the fact that you've taken a new action. If there's no action, you've haven't truly decided"</i>
            <br>
            <b>
                Tony Robbins &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <u>Read more</u>
            </b>
        </p>    
    </div>

    <div class="servicesBox">
        <p>
            <b><u>Coaching Children through Separation</u></b>
            <br>
            <i>"Overcome that notion that you must be regular. It robs you of the chance to be extra-ordinary."</i>
            <br>
            <b>
                Uta Hagen &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<u>Read more</u>
            </b>
        </p>
    </div>

    <div class="servicesBox">
        <p>
            <b><u>Well being Coach and Massage</u></b>
            <br>
            <i>"Modern medicine, for all its advances, knows less that 10% of what your body knows instinctively."
            ”</i>
            <br>
            <b>
                Deepak Chopra&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <u>Read more</u>
            </b>
        </p>
    </div>

    <div class="servicesBox">
        <p>
            <b><u>What i do!</u></b>
            <br>
            <i>I am a professional in Strategic Interventionist and Coaching, Master NLP/ Time Line Therapy and Hypnosis Practitioner and Therapeutic Massage Practitioner.</i>
            <br>
            <b>
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <u>Read more</u>
            </b>
        </p>    
    </div>
</div>   
</div>

CSS:

#debug {
    position:absolute;
    top:350px;
}
.commenthidden {
    display:none
}
.commentshown {
    display:inline
}

JQuery:

$(document).ready(function () {
    $("#clickme").click(function () {
        $("#PBScontent").slideToggle("slow")
    });
});

Answer 1

Try display:block, not display:inline.