Simple Bootstrap Accordion Interface

index.haml

%div.container
    %div.row
        %div.col-lg-12
            %ul.collapsible-doodads
                %li.active.clearfix
                    %div.gui-button
                    %div.content 
                        %h5 Lorem ipsum dolor sit amet
                        %p Consectetur adipisicing elit. Esse facere sint eum voluptatem reiciendis totam doloribus asperiores doloremque atque dolorem saepe officia cupiditate? Veniam ab in libero non perferendis dolore.
                %li.clearfix
                    %div.gui-button
                    %div.content 
                        %h5 Lorem ipsum dolor sit amet
                        %p Consectetur adipisicing elit. Esse facere sint eum voluptatem reiciendis totam doloribus asperiores doloremque atque dolorem saepe officia cupiditate? Veniam ab in libero non perferendis dolore.
                %li.clearfix
                    %div.gui-button
                    %div.content 
                        %h5 Lorem ipsum dolor sit amet
                        %p Consectetur adipisicing elit. Esse facere sint eum voluptatem reiciendis totam doloribus asperiores doloremque atque dolorem saepe officia cupiditate? Veniam ab in libero non perferendis dolore.
                %li.clearfix
                    %div.gui-button
                    %div.content 
                        %h5 Lorem ipsum dolor sit amet
                        %p Consectetur adipisicing elit. Esse facere sint eum voluptatem reiciendis totam doloribus asperiores doloremque atque dolorem saepe officia cupiditate? Veniam ab in libero non perferendis dolore.

script.js

$(function(){
  var _collapseList = $('ul.collapsible-doodads');
  $("ul.collapsible-doodads li div.gui-button").on('click', function(e) {
    $(_collapseList).children('li.active').removeClass('active');
    $(this).parent('li').addClass('active');    
  });
});

Simple-Bootstrap-Accordion-Interface.markdown

Simple Bootstrap Accordion Interface

Built this for a project we are working on using Twitter Bootstrap (if you wonder why I added it to sources). The design is by Kenny Chan.

A Pen by auginator on CodePen.

License.

style.css

ul.collapsible-doodads {
  list-style:none;
  border-top:4px solid #fff;
  border-left:4px solid #fff;
  border-right:4px solid #fff;
  margin:0;
  position:relative;
}

ul.collapsible-doodads li {
  border-bottom:4px solid #fff;
  background:#f1f1f1;
  position:relative;
  padding:1em;
}

ul.collapsible-doodads li.active {
  background:#fdfdfd;
}
ul.collapsible-doodads li p {
  transition: height 1s;
  display:none;
}

ul.collapsible-doodads li.active p {
  display:block;
}

ul.collapsible-doodads li div.gui-button {
  font-size:36px;
  float:left;
  display:block;
  width:32px;
  height:32px;
  background-image: url(http://s.cdpn.io/44303/ui-buttons-sm.png);
  margin-top:4px;
  cursor:pointer;
}

ul.collapsible-doodads li.active div.gui-button {
  background-position:-32px;
  margin-top:30px;
}

ul.collapsible-doodads li div.content {
  display:block;
  float:left;
  margin-left:18px;
  width:80%;
}