title: How to open a bootstrap collapse on the focus event of the first two fields
body: <p>I have a form partial as follows:</p>
  
  <pre><code>  =simple_form_for(user, :validate =&gt; true, :namespace =&gt; namespace, :html =&gt; {:class =&gt; 'form form-inline'}) do |user|   
      =user.input :name, placeholder: 'Enter your name...', :label =&gt; false, input_html: { class: "quote-form-field open_#{namespace}" }  
      =user.input :email, placeholder: 'Enter your email...', :label =&gt; false,input_html: { class: "quote-form-field open_#{namespace}" }  
      =user.submit 'Get Your Free Quote',:class =&gt; 'btn quote-form-submit', :id =&gt; "submit_button_#{namespace}"
      .accordion
        .accordion-group  
          .accordion-body.collapse{:id =&gt; namespace}
            .accordion-inner
              =user.simple_fields_for :submissions do |s|
                =s.input :due_date, :as =&gt; :string, :label=&gt; false, :placeholder =&gt; "Due Date",input_html: { class: 'datepicker quote-form-field'}
                =s.input :work_type, :label=&gt; false, collection: [ "Proofreading", "Editing",],prompt: "Editing or Proofreading?",input_html: {class: 'quote-form-dropdown-field'}
                =s.input :sample_text, :label=&gt; false,:placeholder =&gt; "Paste a sample of your work here. Minimum 250 words",input_html: {class: 'quote-form-text-field'}
                =s.input :notes, :label =&gt; false,:placeholder =&gt; "Any additional details we should know", input_html: {class: 'quote-form-short-text-field'}
                =s.input :word_count, placeholder: "Enter the total word count...", :label =&gt; false,input_html: {class: 'quote-form-field'} 
              =user.submit 'Get Your Free Quote',:class =&gt; 'btn quote-form-submit'
  </code></pre>
  
  <p>I use the :namespace attribute because I have two identical forms on the same page.</p>
  
  <p>I call the partial as follows:</p>
  
  <p>=render 'shared/quote_form', :user => @user, :namespace => 'first_form'</p>
  
  <p>=render 'shared/quote_form', :user => @user, :namespace => 'second_form'</p>
  
  <p>The form gets rendered as follows:</p>
  
  <pre><code>&lt;form accept-charset="UTF-8" action="/users" class="simple_form form form-inline" data-validate="true" id="first_form_new_user" method="post" novalidate="novalidate"&gt;&lt;div style="margin:0;padding:0;display:inline"&gt;&lt;input name="utf8" type="hidden" value="&amp;#x2713;" /&gt;&lt;input name="authenticity_token" type="hidden" value="SLxFqS6qw9bNQ6D23iD1ptvt0EsK/PK1mzYwCkbK0FU=" /&gt;&lt;/div&gt;&lt;div class="control-group string required user_name"&gt;&lt;div class="controls"&gt;&lt;input class="string required quote-form-field open_first_form" id="first_form_user_name" name="user[name]" placeholder="Enter your name..." type="text" /&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div class="control-group email required user_email"&gt;&lt;div class="controls"&gt;&lt;input class="string email required quote-form-field open_first_form" id="first_form_user_email" name="user[email]" placeholder="Enter your email..." type="email" /&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;input class="btn quote-form-submit" id="submit_button_first_form" name="commit" type="submit" value="Get Your Free Quote" /&gt;
  &lt;div class='accordion'&gt;
  &lt;div class='accordion-group'&gt;
  &lt;div class='accordion-body collapse' id='first_form'&gt;
  &lt;div class='accordion-inner'&gt;
  &lt;div class="control-group string required user_submissions_due_date"&gt;&lt;div class="controls"&gt;&lt;input class="string required datepicker quote-form-field" id="first_form_user_submissions_attributes_0_due_date" name="user[submissions_attributes][0][due_date]" placeholder="Due Date" type="text" /&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div class="control-group select required user_submissions_work_type"&gt;&lt;div class="controls"&gt;&lt;select class="select required quote-form-dropdown-field" id="first_form_user_submissions_attributes_0_work_type" name="user[submissions_attributes][0][work_type]"&gt;&lt;option value=""&gt;Editing or Proofreading?&lt;/option&gt;
  &lt;option value="Proofreading"&gt;Proofreading&lt;/option&gt;
  &lt;option value="Editing"&gt;Editing&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div class="control-group text required user_submissions_sample_text"&gt;&lt;div class="controls"&gt;&lt;textarea class="text required quote-form-text-field" id="first_form_user_submissions_attributes_0_sample_text" name="user[submissions_attributes][0][sample_text]" placeholder="Paste a sample of your work here. Minimum 250 words"&gt;
  &lt;/textarea&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div class="control-group text optional user_submissions_notes"&gt;&lt;div class="controls"&gt;&lt;textarea class="text optional quote-form-short-text-field" id="first_form_user_submissions_attributes_0_notes" name="user[submissions_attributes][0][notes]" placeholder="Any additional details we should know"&gt;
  &lt;/textarea&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div class="control-group integer optional user_submissions_word_count"&gt;&lt;div class="controls"&gt;&lt;input class="numeric integer optional quote-form-field" id="first_form_user_submissions_attributes_0_word_count" name="user[submissions_attributes][0][word_count]" placeholder="Enter the total word count..." step="1" type="number" /&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;input class="btn quote-form-submit" name="commit" type="submit" value="Get Your Free Quote" /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I target the collapsable element and the button as follows:</p>
  
  <pre><code>  // open the form for the first two fields
      $(".open_first_form").focus(function(){
          $('#first_form').collapse('show');
          $('#submit_button_first_form').hide();
          });  
  
      // open the second form for the first two fields
      $(".open_second_form").focus(function(){
          $('#second_form').collapse('show');
          $('#submit_button_second_form').hide();
          });
  </code></pre>
  
  <p>I see that I have some serious duplication here but as a NOOB with jquery I don't know how to clean it up.</p>
  
  <p>Any help appreciated.</p>