The error you're receiving is happening because your code's being read in the header before jQuery is being referenced.
It is a good idea to review the documentation Joe's mentioned; it's always good to know "the right way" before experimenting and implementing an alternative solution, the way I have for my "one-off" implementations. 
Joe - I deeply appreciate all the work you put into the videos, the documentation, and most of all, into MojoPortal itself. Exploring different ways of implementing functionality is a hallmark of the kind of people drawn to MojoPortal, and sometimes it's good to know "good enough" techniques when there's no time to do a custom control, re-compile, upload, etc.
Dasan - here is working example code of the jQuery horizontal slider on the front page of Rose and Dagger: it should give you an idea of how to do an "on the fly" implementation. The following code is embedded along with the proper unordered list structures in an HTML control:
/*Main Container*/
.container {
width:872px;
}
.container ul{
list-style-type: none;
margin: 0;
padding:0;
}
.container li{
display: inline;
margin: 0px;
padding:0px;
}
/*Content Container*/
.contentContainer {
padding-left: 0px;
float: left;
width:0px;
height: 398px;
overflow:hidden;
}
.contentWrapper{
}
.contentInnerWrapper{
text-align: justify;
}
/* Handle*/
.handle{
float: left;
width: 84px;
height: 398px;
margin:0;
background: url("/Data/Sites/1/FrontPageSlider/inactive.jpg") no-repeat;
}
.handle img{
position:absolute;
margin-left:-82px;
clip: rect(0px, 164px, 398px, 90px)
/*top, right, bottom, left*/
}
.handleOver{
background: url("hover.jpg") no-repeat;
}
.handleSelected{
background: url("active.jpg") no-repeat;
}
.handleSelected:hover{
background: url("hover.jpg") no-repeat;
}
.handleSelected:hover img{
position:absolute;
margin-left:-82px;
clip: rect(0px, 164px, 398px, 88px)
}
.handleSelected img
{
position:absolute;
margin-left:0px;
clip: rect(0px, 84px, 398px, 4px)
}
.divText
{
width:417px!important;
margin-left:2px;
height:60px;
z-index:85;
padding:10px;
color:#eeeeee;
background-image:url("grey_trans.png");
background-repeat:repeat;
font-size:11px;
} </style>
<script type="text/javascript" src="/ClientScript/hrzAccordion/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/ClientScript/hrzAccordion/jquery.hrzAccordion.js"></script>
<script type="text/javascript" src="/ClientScript/hrzAccordion/thisInstance.js"></script>
It's a big jump from DNN to MojoPortal; I've found Mojo to be a great product, and I'm sure you will, too. Hang in there!