A micro gem providing an accordion view helper and a tabs view helper that generate the proper markup for Twitter Bootstrap

README.markdown

Twitter Bootstrap Components Helper

Provides an accordion helper and a tabs helper

In your Gemfile:

gem 'bootstrap-components-helpers', :git => 'git://gist.github.com/2117187.git'

Accordion helper:

= accordion do |accordion|
  = accordion.pane 'My first pane' do
    = render partial: 'my_first_pane'
  = accordion.pane 'My second pane' do
    = render partial: 'my_second_pane'

accordion method options :

• :accordion_id : when you want more than one accordion on the same page.
• :open : when you want the first pane to be open on load.

Tabs helper:

= tabs do |tabs|
  - tabs.pane 'My first pane' do
    = render partial: 'my_first_pane'
  - tabs.pane 'My second pane' do
    = render partial: 'my_second_pane'

tabs method options :

• :direction : to control the positioning of the tabs. Valid values are below, left, right and above (default is above).
• :style : tabs or pills (default is tabs).

accordion_helper.rb

module BootstrapComponentsHelpers
  module AccordionHelper
    def accordion opts = {}
      opts[:accordion_id] ||= 'accordion'
      builder = AccordionBuilder.new opts, self
      content_tag :div, :class => 'accordion', :id => opts[:accordion_id] do
        yield builder
      end
    end

    class AccordionBuilder

      attr_reader :parent
      delegate :capture, :content_tag, :link_to, :to => :parent

      def initialize opts, parent
        @first = true
        @parent = parent
        @opts = opts
      end

      def pane title, &block
        css_class =  (@first && @opts[:open]) ? 'in' : ''
        @first = false
        content_tag :div, :class => 'accordion-group' do
          heading = content_tag :div, :class => 'accordion-heading' do
            link_to title, "##{title.parameterize}_pane", :class => 'accordion-toggle', :'data-toggle' => 'collapse',
            :'data-parent' => "##{@opts[:accordion_id]}"
          end
          body = content_tag :div, :class => "accordion-body collapse #{css_class}", :id => "#{title.parameterize}_pane" do
            content_tag :div, :class => 'accordion-inner' do
              capture(&block)
            end
          end
          heading + body
        end
      end
    end
  end
end

ActionView::Base.send :include, BootstrapComponentsHelpers::AccordionHelper

bootstrap-components-helpers.gemspec

Gem::Specification.new do |s|
  s.name         = 'bootstrap-components-helpers'
  s.summary      = 'Accordion view helper for Twitter Bootstrap'
  s.description  = 'A micro gem providing an accordion view helper that generates the proper markup for Twitter Bootstrap'
  s.version      = '0.0.1'
  s.platform     = Gem::Platform::RUBY

  s.files        = ['bootstrap-components-helpers.rb', 'accordion_helper.rb', 'tabs_helper.rb']
  s.require_path = '.'

  s.author      = 'Ivan Schneider'
  s.email       = 'git@ivanschneider.fr'
  s.homepage    = 'https://dbinsights.herokuapp.com'

  # s.test_file    = '_spec.rb'
  # s.add_development_dependency('rspec', ["~> 2.8"])
end

bootstrap-components-helpers.rb

require 'accordion_helper'
require 'tabs_helper'

tabs_helper.rb

module BootstrapComponentsHelpers
  module TabsHelper
    def tabs opts = {}
      opts[:direction] ||= 'above'
      opts[:style] ||= 'tabs'
      builder = TabsBuilder.new self
      yield builder
      tabs = content_tag(:ul, builder.pane_handles.join("\n").html_safe, :class => "nav nav-#{opts[:style]}")
      contents = content_tag(:div, builder.pane_contents.join("\n").html_safe, :class => 'tab-content')
      css_direction = "tabs-#{opts[:direction]}" unless opts[:direction] == 'above'
      content_tag :div, :class => "tabbable #{css_direction}" do
        if opts[:direction] == 'below'
          contents + tabs
        else
          tabs + contents
        end
      end
    end

    class TabsBuilder

      attr_reader :parent, :pane_contents, :pane_handles
      delegate :capture, :content_tag, :to => :parent

      def initialize parent
        @first = true
        @parent = parent
        @pane_handles = []
        @pane_contents = []
      end

      def pane title, &block
        css_class, @first = 'active', false if @first
        link = content_tag(:a, title, :'data-toggle' => 'tab', :href => "##{title.parameterize}_tab")
        @pane_handles << content_tag(:li, link, :class => css_class)
        @pane_contents << (content_tag :div, :class => "tab-pane #{css_class}", :id => "#{title.parameterize}_tab" do
          capture(&block)
        end)
        nil
      end

    end
    
  end
end

ActionView::Base.send :include, BootstrapComponentsHelpers::TabsHelper

Hi, great code... thanks for sharing.

I am writing this comment in lieu of a pull request, since gists don't yet support pull requests.

I forked a forked copy of your repo and added the ability for users to specify the selected tab by passing an :active option. The person I forked it from added a similar feature, allowing users to specify the open accordion pane.

Please consider pulling in our simple additions.
https://gist.github.com/calebhaye/5105757

Hi,

I turned the micro gem into a gem that includes your additions ; https://github.com/isc/bootstrap-components-helpers