How to add bootstraps accordion feature?

[cmpsoares91]

Hey Dan I was trying to add an accordion using Collapse.js but it isn't working right... I was using this example from bootply.

The funny thing is that if I add | <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> to the block head from the jade file It works! But at the same time it messes up the beautiful footer! Damn! :-1:

So I was hoping you could help me with this.

I already tried updating the /public/lib/bootstrap/ with the latest version of the bootstrap repo, no luck either...

I thought it would look nice on the twitter api page or as a news block at the index page...

My twitter.jade as example:

extends ../layouts/layout

block head
  title #{application} · Twitter
  | <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
  | <style type='text/css'>
  | .panel-scroll{
  |   max-height: 600px;
  |   overflow-y: scroll;
  |   -webkit-overflow-scrolling: touch;
  | }
  | </style>

block content
  .container
    .row
      .col-md-4.col-md-push-8
        .page-header
          h2
            i.fa.fa-star(style='color: #E8EA1B')
            | &nbsp;What is QuantBull Tweetin'?
        br
        .lead Feel free to reply as well!
        a.twitter-timeline(href='https://twitter.com/QuantBull', data-widget-id='480147990342926336') Tweets by @QuantBull
        script#twitter-wjs(src='http://platform.twitter.com/widgets.js')
        script
          !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
      .col-md-8.col-md-pull-4
        .page-header
          h2
            i.fa.fa-twitter(style='color: #4099ff')
            | &nbsp;Twitter News
          p(style='line-height: 1.72') Quants stay always up to date!
        br
        .lead We are showing you the 100 latest "Quant" Tweets, to keep you up to date:
        .panel.panel-default
            .panel-body.panel-scroll
                ul.list-unstyled
                  for tweet in tweets
                    li
                      .panel.panel-default
                        .panel-body
                          .clearfix
                            - var image = tweet.user.profile_image_url.replace('_normal', '');
                            img.pull-left(src='#{image}', width=50, height=50, style='margin-right: 10px')

                            p= tweet.user.name
                              | &nbsp;&nbsp;
                              span.text-muted @#{tweet.user.screen_name}
                            p #{tweet.text}

[dstroot]

I use /less/bootstrap.less to turn off/on bootstrap features - less bloat for stuff I don't need and I can simply update bootstrap in public/lib via bower and not edit any of the bootstrap files directly.

You will have to uncomment the appropriate items below:

// NOTE: By copying the main bootstrap.less file and importing
// this one instead we can turn on/off components here
// without changing any of the bootstrap source files (EASY TO UPDATE)

// NOTE: we overide bootstrap variables and styles directly in our
// styles.less file

// NOTE: I generally recommend commenting out all of the
// "Components" and "Components w/ JavaScript" and only
// turning them back on as needed - fight bloat!

// Core variables and mixins
@import "../public/lib/bootstrap/less/variables.less";
@import "../public/lib/bootstrap/less/mixins.less";

// Reset
@import "../public/lib/bootstrap/less/normalize.less";
// @import "../public/lib/bootstrap/less/print.less";

// Core CSS
@import "../public/lib/bootstrap/less/scaffolding.less";
@import "../public/lib/bootstrap/less/type.less";
// @import "../public/lib/bootstrap/less/code.less";
@import "../public/lib/bootstrap/less/grid.less";
@import "../public/lib/bootstrap/less/tables.less";
@import "../public/lib/bootstrap/less/forms.less";
@import "../public/lib/bootstrap/less/buttons.less";

// Components
@import "../public/lib/bootstrap/less/component-animations.less";
// @import "../public/lib/bootstrap/less/glyphicons.less";
@import "../public/lib/bootstrap/less/dropdowns.less";
// @import "../public/lib/bootstrap/less/button-groups.less";
// @import "../public/lib/bootstrap/less/input-groups.less";
@import "../public/lib/bootstrap/less/navs.less";
@import "../public/lib/bootstrap/less/navbar.less";
// @import "../public/lib/bootstrap/less/breadcrumbs.less";
// @import "../public/lib/bootstrap/less/pagination.less";
// @import "../public/lib/bootstrap/less/pager.less";
// @import "../public/lib/bootstrap/less/labels.less";
// @import "../public/lib/bootstrap/less/badges.less";
@import "../public/lib/bootstrap/less/jumbotron.less";
// @import "../public/lib/bootstrap/less/thumbnails.less";
@import "../public/lib/bootstrap/less/alerts.less";
@import "../public/lib/bootstrap/less/progress-bars.less";
// @import "../public/lib/bootstrap/less/media.less";
// @import "../public/lib/bootstrap/less/list-group.less";
@import "../public/lib/bootstrap/less/panels.less";
@import "../public/lib/bootstrap/less/wells.less";
@import "../public/lib/bootstrap/less/close.less";

// Components w/ JavaScript
@import "../public/lib/bootstrap/less/modals.less";
// @import "../public/lib/bootstrap/less/tooltip.less";
// @import "../public/lib/bootstrap/less/popovers.less";
// @import "../public/lib/bootstrap/less/carousel.less";

// Utility classes
@import "../public/lib/bootstrap/less/utilities.less";
@import "../public/lib/bootstrap/less/responsive-utilities.less";

[dstroot]

If you are developing just turn everything on and when you are done with development and into performance turning you can turn off what you aren't using.

However I do the opposite - I turn all the added fluff off and then only turn on what I need as I build.

[cmpsoares91]

But I can't understand why it's not working, because they say the need component-animations.less, it's on in the version you've sent me, and the transition.js and collapse.js have to be included as well... And they are... Why isn't it working? :-/

[cmpsoares91]

Yes! Found the missing dependency!

@import "../public/lib/bootstrap/less/list-group.less";

That fixed it...