title: jQuery hide or show animation
body: <p>I am trying to copy that animation you see on <a href="http://www.themenesia.com/themeforest/truehost/faq.html" rel="nofollow">http://www.themenesia.com/themeforest/truehost/faq.html</a></p>
  
  <p>You click on the Plus symbol it shows the content and click it back (minus symbol) it hides the text.</p>
  
  <p>So, this is what I did in my code to copy that behavior:</p>
  
  <p>My about.html</p>
  
  <pre><code>&lt;div class="post-content wow fadeInUp"&gt; 
      &lt;ul class="toggle-list"&gt;
      &lt;li&gt;
      &lt;h2 class="acc_active"&gt;My questions&lt;/h2&gt;
      &lt;div class="ac-content"&gt;My answer&lt;/div&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My style.css</p>
  
  <p>Copied this code from that template's style.css and added to my style.css</p>
  
  <pre><code>.toggle-list {
      list-style:none;
      margin:0;
      padding:0
  }
  .toggle-list li {
      margin-bottom:10px;
      background:#fff;
      border:1px solid #ddd;
      border-bottom:solid 3px #ddd
  }
  .toggle-list li h2 {
      -moz-user-select:none;
      -html-user-select:none;
      user-select:none;
      color:#555;
      font-size:16px;
      line-height:20px;
      font-family:Roboto, Arial, Helvetica, sans-serifr;
      padding:7px 20px 0 60px;
      font-weight:700;
      display:block;
      letter-spacing:normal;
      margin:10px 0
  }
  .toggle-list li .acc_active:hover {
      color:#777;
      background:url(../images/icon-slide-plus.png) 20px center no-repeat;
      padding-left:80px;
      -o-transition:.5s;
      -ms-transition:.5s;
      -moz-transition:.5s;
      -webkit-transition:.5s;
      transition:.5s
  }
  .toggle-list .ac-content {
      display:none;
      padding:20px;
      border-top:solid 1px #e5e5e5
  }
  .acc_active {
      background:url(../images/icon-slide-plus.png) 20px center no-repeat;
      -o-transition:.5s;
      -ms-transition:.5s;
      -moz-transition:.5s;
      -webkit-transition:.5s;
      transition:.5s;
      height:32px
  }
  .acc_noactive {
      background:url(../images/icon-slide-min.png) 20px center no-repeat
  }
  img {
      width:auto;
      height:auto
  }
  .img-left {
      float:left;
      margin:5px 15px 15px 0
  }
  .img-right {
      float:right;
      margin:5px 0 15px 15px
  }
  </code></pre>
  
  <p>Added the toggle function to my custom.js that you see on the custom.js of that template <a href="http://www.themenesia.com/themeforest/truehost/js/custom.js" rel="nofollow">http://www.themenesia.com/themeforest/truehost/js/custom.js</a></p>
  
  <p>I somehow cannot get the effect to work on my site. It shows the answer straight away and the question is not displayed at all.</p>
  
  <p>How do I copy that effect? Any help please?</p>