title: how to showing a div tag when select a checkbox
body: <p>I have a checkbox that I want to display a div tag when I check it ...</p>
  
  <p>My CSS for my <code>div</code> in the regular state is :</p>
  
  <pre><code>.bookInfo {
  width: 0px;
  font-size: 2em;
  height: 0px;
  overflow: hidden;
  -webkit-transition: height 2s, width 2s;
  -moz-transition: height 2s, width 2s;
  -ms-transition: height 2s, width 2s;
  -o-transition: height 2s, width 2s;
  transition: height 2s, width 2s;    
  }
  </code></pre>
  
  <p>I want when I check the checkbox it becomes :</p>
  
  <pre><code>width: auto;
  height: auto;
  -webkit-transition: height 2s, width 2s;
  -moz-transition: height 2s, width 2s;
  -ms-transition: height 2s, width 2s;
  -o-transition: height 2s, width 2s;
  transition: height 2s, width 2s;        
  </code></pre>
  
  <p>My checkbox and div tag :</p>
  
  <pre><code> &lt;input type="checkbox" name="bookList" value="book2" id="bookList_2"&gt;
  
    &lt;div class="bookInfo" id="infoBox"&gt;
  testetstetwtasdljas;ilsajdlaisjdiasjdiaojwiejasdjlsjd&lt;br&gt;
  testetstetwtasdljas;ilsajdlaisjdiasjdiaojwiejasdjlsjd&lt;br&gt;
  testetstetwtasdljas;ilsajdlaisjdiasjdiaojwiejasdjlsjd&lt;br&gt;
  testetstetwtasdljas;ilsajdlaisjdiasjdiaojwiejasdjlsjd&lt;br&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>How do I do this?</p>