title: Show/Hide div on button click in backbone
body: <p>This may be really simple for you guys, but since I'm learning backbone and jquery, I'm having hard time figuring this out.</p>
  
  <p>When the page first loads, I want it to show only one div (out of a few), and start showing other divs when Yes/No button is clicked. I'm also using twitter bootstrap for ui</p>
  
  <p>This is what I have for backbone view: </p>
  
  <pre><code>App.Views.Question = Backbone.View.extend({
      tagName: 'div',
  
      className: 'question-box hide',
  
      template: template('questionTemplate'),
  
      events: {
  
      },
  
      initialize: function () {
          this.model.on('reset', this.render, this);
      },
  
      render: function () {
          var editQuestionnaire = this.model.toJSON();
          console.log(this.$el.html(editQuestionnaire));
          this.$el.html(this.template(editQuestionnaire));
          //console.log(this.model);
          return this;
      }
  });
  </code></pre>
  
  <p>As you can see, I set the className to 'question-box hide', but it hides all the divs. </p>
  
  <p>Here's my Index.html</p>
  
  <pre><code>&lt;div class="bs-docs-example bs-docs-question"&gt;
          &lt;span class="badge badge-success"&gt;&lt;%= question_id %&gt;&lt;/span&gt;
          &lt;div class="span3 question-div"&gt;
              &lt;h4 class="text-info"&gt;
                  &lt;%= question %&gt;
              &lt;/h4&gt;
              &lt;div class="hs&lt;%= question_id %&gt;"&gt;&lt;/div&gt; 
              &lt;script type="text/javascript"&gt;
                  var id = &lt;%= question_id %&gt;;
                  var yes_id = &lt;%= yes_question_id %&gt;;
                  var no_id = &lt;%= no_question_id %&gt;; 
  
                  if(id == 1)
                  {
                      $('div .question-box').attr('class', 'question-box show');
                  }
                  if(id != 8 &amp;&amp; id != 9 &amp;&amp; id != 6)
                  {
                      $('.hs&lt;%= question_id %&gt;')
                          .append('&lt;button type="button" class="btn btn-primary"&gt;Yes &lt;/button&gt;')
                          .append('&lt;button type="button" class="btn btn-warning"&gt;No&lt;/button&gt;');
                  }         
  
                  else if(id == 6)
                  {
                      $('.hs&lt;%= question_id %&gt;')
                           .append('&lt;button type="button" class="btn btn-primary"&gt;OK &lt;/button&gt;')
                           .append('&lt;button type="button" class="btn btn-warning"&gt;Cancel&lt;/button&gt;');
                  }         
  
              &lt;/script&gt;
  
              &lt;span class="span5"&gt;&lt;/span&gt;
  
  
          &lt;div class="span4"&gt;&lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The project is sort of conditional branching site. So, the first box must always appear. Then depending on the question answered, a different box should appear. (I think I know how to do this. I think I can create a function which will take question_id as an argument, and then display the box. I can put onclick option in button. I haven't tried this yet, though) 
  I'd really appreciate your help. </p>
  
  <p>Thank you. </p>