Ok, I tried the tutorial you posted and it didn't work. I tried another tutorial and it didn't work.
Tutorial Link: http://jsfiddle.net/KyleMit/QR7hR/
Problem: For some reason there is a scroll down/up bar and when I click the content headings they do not expand/collapse. Also the heading are centered, but I can probably fix this.
Coding showing 'Import' of the CSS file and Javascript File:
<!--
@import url("js/expandable-panels-js.js");
@import url("css/expandable-panels-css.css");
Coding showing just the boxes (HTML):
<section id="boxcontent">
<section id="four_columns">
<h2 class="style16">Our Articles</h2>
<div><p class="style17 style5">Free Content</p>
</div>
<div class="expandable-panel" id="container">
<div class="expandable-panel" id="cp-1">
<div class="expandable-panel-heading">
<h2>Content heading 1<span class="icon-close-open"></span></h2>
</div>
<div class="expandable-panel-content">
<p>First Panel HTML...</p>
</div>
</div>
<div class="expandable-panel" id="cp-2">
<div class="expandable-panel-heading">
<h2>Content heading 2<span class="icon-close-open"></span></h2>
</div>
<div class="expandable-panel-content">
<p>Second Panel HTML...</p>
</div>
</div>
<div class="expandable-panel" id="cp-3">
<div class="expandable-panel-heading">
<h2>Content heading 3<span class="icon-close-open"></span></h2>
</div>
<div class="expandable-panel-content">
<p>Third Panel HTML...</p>
</div>
</div>
</div>