title: Making a CSS accordion open by clicking on plus sign OR the label
body: <p>I found a great CSS/html codepen that allows me to view text in an accordion fashion when clicking on text inside the <code>label</code> element of class <code>question</code>, but there's only one problem I have with it:</p>
  <h3>The problem:</h3>
  <p><strong>I can't use the plus-signs of class <code>plus</code> to also toggle the accordion. Instead, in the current implementation the accordions only open and allow me to view the answer if I click on the text inside the <code>label</code> elements of class <code>question</code>.</strong></p>
  <p>As things stand now, if I click on the plus sign (of class <code>.plus</code>), nothing happens.  Can someone help me to modify this code so that clicking on <em>either</em> the plus-sign of class <code>plus</code> <em>or</em> the question text itself inside of the <code>label</code> element toggles the answers' visibility?</p>
  <p>This is the codepen:
  <a href="https://codepen.io/ihatecoding/pen/ryOpQd" rel="nofollow noreferrer">https://codepen.io/ihatecoding/pen/ryOpQd</a></p>
  <p>This is the snippett:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,800);
  
  body {
    font-family: 'Open Sans';
    font-size: 1.5em;
    background: #eee;
  }
  
  .content {
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    padding: 0 60px 0 0;
  }
  
  .centerplease {
    margin: 0 auto;
    max-width: 270px;
    font-size: 40px;
  }
  
  .question {
    position: relative;
    background: #8FBC8F;
    margin: 0;
    padding: 10px 10px 10px 50px;
    display: block;
    width:100%;
    cursor: pointer;
  }
  
  .answers {
    background: #999;
    padding: 0px 15px;
    margin: 5px 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    position: relative;
    opacity: 0;
    -webkit-transition: .7s ease;
    -moz-transition: .7s ease;
    -o-transition: .7s ease;
    transition: .7s ease;
  }
  
  .questions:checked ~ .answers{
    height: auto;
    opacity: 1;
    padding: 15px;
  }
  
  .plus {
    position: absolute;
    margin-left: 10px;
    z-index: 5;
    font-size: 2em;
    line-height: 100%;
    -webkit-user-select: none;    
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
  }
  
  .questions:checked ~ .plus {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  .questions {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='centerplease'&gt;
    FAQ accordion
  &lt;/div&gt;
  &lt;br&gt;
  
  &lt;div class="content"&gt;
  &lt;div&gt;
    &lt;input type="checkbox" id="question1" name="q"  class="questions"&gt;
    &lt;div class="plus"&gt;+&lt;/div&gt;
    &lt;label for="question1" class="question"&gt;
      This is the question that will be asked?
    &lt;/label&gt;
    &lt;div class="answers"&gt;
      What if the answer is really long and wraps the whole page and you never want to finish it but you have to because its the answer!
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;input type="checkbox" id="question2" name="q" class="questions"&gt;
    &lt;div class="plus"&gt;+&lt;/div&gt;
    &lt;label for="question2" class="question"&gt;
      Short?
    &lt;/label&gt;
    &lt;div class="answers"&gt;
      short!
    &lt;/div&gt;
  &lt;/div&gt;
    
  &lt;div&gt;
    &lt;input type="checkbox" id="question3" name="q" class="questions"&gt;
    &lt;div class="plus"&gt;+&lt;/div&gt;
    &lt;label for="question3" class="question"&gt;
      But what if the question is really long and wraps the whole page and you feel like you will never finish reading the question?
    &lt;/label&gt;
    &lt;div class="answers"&gt;
      This is the answer!
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>