A less invasive approach to using the collapsible plugin from Twitter Bootstrap. Requires the use of less and a bit of additional javascript.

Twitter Bootstrap Collapsible Accordion Example

/*
Twitter Bootstrap is a nice library, but the way they handle markup for styles and plugins is a bit invasive at
times. Since Bootstrap is built with Less CSS anyway, it makes sense to take advantage of Less to cleanup the
markup.

This is an attempt at cleaning up the collapsible accordion example. If you don't like the HTML5 tags, you can
replace them with divs with classes (make the appropriate changes in the less).

One quirk that I know of: if you use the "in" class to indicate a default open article, the first accordion
click will not transition smoothly. I haven't figured out why this is happening, but generally with the
collapsible plugin I find the behavior of the transitions to be a bit inconsistent already.
*/

/* ------------------  less code ------------------ */
@import "bootstrap.less";

.accordion section {
  .accordion-group;
}

.accordion header a {
  .accordion-heading .accordion-toggle;
}

.accordion article {
  .collapse;
}

.accordion div {
  .accordion-inner;
}

/* ------------------  html ------------------ */
<div id="my">
    <section>
        <header>
            <a href="#one">Collapsible Section for Article #1</a>
        </header>
        <article id="one" class="in">
            <div>
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
            </div>
        </article>
    </section>
    <section>
        <header>
            <a href="#two">Collapsible Section for Article #2</a>
        </header>
        <article id="two">
            <div>
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
            </div>
        </article>
    </section>
    <section>
        <header>
            <a href="#three">Collapsible Section for Article #3</a>
        </header>
        <article id="three">
            <div>
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
            </div>
        </article>
    </section>
</div>

/* ------------------  script ------------------ */

$(document).ready(function() {
    $('#my').addClass('accordion'); /* or put class="accordion" on the div */
    $('.accordion header a').each(function() {
        var a = $(this);
        a.attr('data-toggle', 'collapse');
        /* data-parent is only needed for auto-collapse to work */
        a.attr('data-parent', '#' + a.closest('.accordion').attr('id'));
    });
});