jQuery Accordion Help

jQuery Accordion Help

I'm currently trying to implement this particular accordion into my site http://jsfiddle.net/8MXAu/

I understand the HTML setup, what i'm having difficutly understanding is how to apply the javascript and scss to my website to make this work. Below is my websites css layout. If you can direct me on how to apply the javascript and scss that would help me out so much!

  1. /* --------------------------------------- APOLLO --------------------------------------- by Ryan Clark www.ryanvsclark.com --------------------------------------- */ /* ---------- GLOBAL STYLING RULES & RESETS ---------- */ * { margin: 0px; padding: 0px; } <virb get="customize.fonts.font_face" /> body { background: <virb get="customize.colors.background_footer" />; font: normal <virb get="customize.fonts.body_size" /> <virb get="customize.fonts.body_family" />; color:<virb get="customize.colors.text" />; line-height: 1.5; font-family: <virb get="customize.fonts.body_family" />,serif; } hr { display: none; } #page hr { display: block; border: none 0; border-top: 1px solid <virb get="customize.colors.line_page" />; width: 100%; height: 1px; margin: 0 0 20px 0; } input, option, textarea, button { font: normal <virb get="customize.fonts.body_size" /> <virb get="customize.fonts.body_family" />; } ul, ol { list-style-type: none; } q:before, q:after { content: ""; } big { font-size: 12px; } small { font-size: 9px; } img { border: none; } a { color: <virb get="customize.colors.link" />; text-decoration: none; outline: none; } a:hover { color: <virb get="customize.colors.link_hover" />; } #footer a { color: <virb get="customize.colors.footer_link" />; text-decoration: none; outline: none; } #footer a:hover { color: <virb get="customize.colors.footer_link_hover" />; } p, h1, h2, h3, h4, h5, h6, ol, ul { line-height: 1.5; } #container_right p { line-height: 150%; } #page #description h2, #page #blog .text h3 { font-size: 1.5em; font-family: <virb get="customize.fonts.body_family" />; } .homepage #page #description h2 { margin: 10px 0 0 0; font-size: 1.5em; } .homepage #page #description h3 { font-size: 1.2em; font-family: <virb get="customize.fonts.body_family" />; color:#888; } #header_wrapper, #page_wrapper, #footer_wrapper { width:100%; position:relative; } /* ---------- HEADER ---------- */ div#header_wrapper { width:100%; background: <virb get="customize.colors.background_header" />; z-index: 2; } div#header { width:960px; margin:0 auto; padding:35px 0 25px; } #header h1 { font: normal <virb get="customize.fonts.site_size" /><virb get="customize.fonts.site_family" />; line-height: 100%; } #header h1 a, #header h1 a:hover { color: <virb get="customize.colors.site_name" />; } #header h1 img { display: block; max-width: 300px; } #header h2 { font-weight: bold; font-size: <virb get="customize.fonts.tagline_size" />; font-family: <virb get="customize.fonts.header_family" />; color: <virb get="customize.colors.tagline" />; line-height: 110%; padding-top: 6px; } #header #page_title { float:left; } #header #site_nav { float:right; margin-top: 22px; } #display_name {width: 300px;} #display_name h2 {color:<virb get="customize.colors.tagline" />; text-transform: uppercase;} /* ---------- NAVIGATION ---------- */ div#site_nav { display: block; max-width: 650px; } #site_nav ul li { display: inline; position: relative; font-size: <virb get="customize.fonts.nav_size" />; font-family: <virb get="customize.fonts.header_family" />; font-weight: bold; letter-spacing: .2px; } #site_nav div.clear { display: none; } #site_nav li.section:after { content: " "; } #site_nav li.section ul { display: none; } #site_nav li.section:hover ul { display: block; } #site_nav li.section ul { position: absolute; top: <virb get="customize.fonts.nav_size" />; left: 10px; width: 200px; z-index: 111; padding-top: 10px; } #site_nav li.section ul li { float: none; display: block; font: normal <virb get="customize.fonts.nav_size" />; background: <virb get="customize.colors.nav_dropdown" />; margin: 0; padding: 7px 7px 5px 7px; letter-spacing: 0; text-align: left; line-height: 1.5; border-bottom: 1px solid <virb get="customize.colors.background_header" />; } #site_nav li.section ul li:last-child {border-bottom: none;} #site_nav li.section ul li a { text-transform: none; letter-spacing: 0; padding: 4px 7px 4px 3px; font: <virb get="customize.fonts.header_family" />; display: block; } #site_nav ul li a, #site_nav ul li.section { cursor: pointer; padding: 0 12px; font: <virb get="customize.fonts.header_family" />; color: <virb get="customize.colors.nav_link" />; } #site_nav ul li a:hover, #site_nav ul li.section:hover { color: <virb get="customize.colors.nav_hover" />; } #site_nav ul li.active, #site_nav ul li.active a { color: <virb get="customize.colors.nav_hover" />; } #site_nav ul li.active ul li a { color: <virb get="customize.colors.nav_link" />; } #site_nav ul li.active ul li a:hover { color: <virb get="customize.colors.nav_hover" />; } #site_nav ul li.active ul li.active a { color: <virb get="customize.colors.nav_hover" />; cursor: default; } /* ---------- PAGE ---------- */ div#page_wrapper { background: <virb get="customize.colors.background_page" />; z-index: 1; overflow: hidden; } div#page { width:960px; margin:0 auto; padding:25px 0 15px; overflow: hidden; border-top: 1px solid <virb get="customize.colors.line_page" />; border-bottom: 1px solid <virb get="customize.colors.line_page" />; } body.index div#page {padding-bottom: 0;} #page div#description { position: relative; padding: 0; width:600px; } #page #description p, #page #description h2, #page #description h3, #page #description h4, #page #description h5, #page #description h6 { padding: 0 0 15px 0; } #page #description ul li, #page #description ol li {padding: 0 0 5px 0;} #page #description h2 {line-height: 1.3;} div#share { display: block; position: relative; clear: both; padding: 10px 0 0 0; } #page #title { display: none; } /* ---------- SIDEBAR ---------- */ div#widgets { font-size: 11px; overflow: hidden; line-height: 0; font-family: <virb get="customize.fonts.footer_family" />; } div#widgets:after { display: block; visibility: hidden; clear: both; content: "\00A0"; } #widgets .module { display: block; float: left; width: 300px; padding: 0 0 20px 0; margin: 0 30px 0 0; } #widgets .last_module {margin: 0;} #widgets .module h4 { font: italic <virb get="customize.fonts.body_size"/> <virb get="customize.fonts.footer_family" />; color: <virb get="customize.colors.widget_text" />; letter-spacing: .2px; padding: 0 0 10px 0; margin-bottom:10px; border-bottom: 1px solid <virb get="customize.colors.line_footer" />; } #widgets h4 a { color: <virb get="customize.colors.footer_link" />; } #widgets h4 a:hover { color: <virb get="customize.colors.footer_link_hover" />; } #widgets .module p { font-size: <virb get="customize.fonts.body_size" />; line-height: 150%; padding: 0; } #widgets .module.twitter ul li span a, #widgets .module.lastfm ul.recent_plays li span { color: <virb get="customize.colors.footer_link" />; } #widgets .module.twitter ul li span a:hover { color: <virb get="customize.colors.text" />; } #widgets .module.lastfm ol { list-style-type: decimal; list-style-position: inside; } #widgets .module.rss-feed ul, #widgets .module.blog-posts ul, #widgets .module.twitter ul, #widgets .module.lastfm ul.upcoming_events, #widgets .module.lastfm ul.recent_plays { margin-bottom: -10px; } #widgets .module.rss-feed ul li, #widgets .module.blog-posts ul li, #widgets .module.twitter ul li, #widgets .module.lastfm ul.upcoming_events li, #widgets .module.lastfm ul.recent_plays li { padding-bottom: 10px; } #widgets .module.lastfm ol li img { display: none; } #widgets .count_2, #widgets .count_5, #widgets .count_8, #widgets .count_11, #widgets .count_14, #widgets .count_17 { margin: 0; } /* AUDIO PLAYER */ .module.audio_player ul { display: block; width: 278px; background: #fff; border: solid 1px #ddd; border-radius: 5px; padding: 10px 10px 15px 10px; overflow: hidden; } .module.audio_player li .album_image { height: 75px; width: 75px; padding: 5px 15px 5px 5px; margin-bottom: 10px; display: block; float:left; } .module.audio_player li .album_image img { height:75px; width:75px; } .module.audio_player li { display: none; } .module.audio_player li.selected { display: block; } #widgets .module.audio_player li h3 { text-align: left; font-size: <virb get="customize.fonts.body_size" />; padding-bottom: 2px; } #widgets .module.audio_player li h3 .download { display: none; } #widgets .module.audio_player ul h4 { display: block; text-align: left; font: normal 12px <virb get="customize.fonts.footer_family" />; text-transform: none; border: none; letter-spacing: 0; padding: 0 0 2px 0; margin: 0; color: <virb get="customize.colors.text" />; } .module.audio_player .controls { display: block; float: left; margin:5px 0 10px 0; text-align: left; padding-bottom: 10px; width: 180px; border-bottom: 1px solid <virb get="customize.colors.line_page" />; } .module.audio_player .controls .prev, .module.audio_player .controls .next { display: inline-block; width: 20px; height: 30px; } .module.audio_player .controls .prev a, .module.audio_player .controls .next a { display: inline-block; width: 20px; height: 30px; overflow: hidden; text-indent: 1000px; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; } .module.audio_player .controls .prev a { background: url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat left -7px; } .module.audio_player .controls .next a { background: url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat right -7px; } .module.audio_player .controls .playpause { display: inline-block; height: 30px; width: 35px; overflow: hidden; } .module.audio_player .controls .playpause a { display: block; height: 30px; width: 35px; overflow: hidden; text-indent: 1000px; background: <virb get="customize.colors.text" /> url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat center -7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; } .module.audio_player .playing .controls .playpause a { background: <virb get="customize.colors.link" /> url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat center -52px; } .module.audio_player audio { width: 150px; padding: 15px 5px 0px 5px; } .module.audio_player .length { display: block; height: 6px; width: 150px; border: solid 1px #ddd; background: #ddd; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; position: relative; margin-top: 9px; float:left; margin-left:95px; } .module.audio_player .length .load { height: 6px; width: 0%; display: block; background: <virb get="customize.colors.text" />; position: absolute; } .module.audio_player .length .progress { height: 6px; width: 0%; display: block; background: <virb get="customize.colors.link" />; position: absolute; } .module.audio_player .length .time { color: <virb get="customize.colors.text" />; font-size: <virb get="customize.fonts.body_size" />; position: absolute; left: 157px; top: -4px; } /***** @group Cart widget *****/ .cart-widget { width: 75px; text-align: center; position: fixed; top: 100px; right: 0; z-index: 2000; } .cart-widget .cart { background: <virb get="customize.colors.line_page" />; font-family: <virb get="customize.fonts.body_family" />; font-size: <virb get="customize.fonts.body_size" />; color: <virb get="customize.colors.text" />; padding: 10px; } .cart-widget .cart span { display: block; } .cart-widget .cart span.label { font-size: .65em; text-transform: uppercase; } .cart-widget .cart span.cart-total { font-weight: bold; } .cart-widget .checkout { background: <virb get="customize.colors.link_hover" />; padding: 5px 10px; text-transform: uppercase; color: <virb get="customize.colors.background_page" />; font-size: 9px; display: block; margin-top: 1px; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -o-transition: all .2s linear; transition: all .2s linear; } .cart-widget .checkout:hover { background: <virb get="customize.colors.link" />; } /***** @group Cart widget *****/ /* ---------- FOOTER ---------- */ div#footer { width:960px; margin:0 auto; padding:25px 0; font-family: <virb get="customize.fonts.footer_family" />; color: <virb get="customize.colors.widget_text" />; } span#virb_customize_footer { color: <virb get="customize.colors.footer_text" />; padding-top: 10px; width:100%; display: block; } /* ie7 specific styles */ .ie7 .audio_player .controls .playpause a, .ie7 .audio_player .controls .prev a, .ie7 .audio_player .controls .next a { font-size:0; display: block; line-height: 0; }