Commits

Scott Nixon committed a957d23 Draft

We now have a properly working toggle on the questions.

Comments (0)

Files changed (1)

article/templates/contact.html

 <script type="text/javascript">
     $(document).ready(function () {
         $('.answer-text').on('show', function () {
-        if ($(this).parent('li').hasClass('accordion-closed')) {
-            $(this).parent('li').removeClass('accordion-closed').addClass('accordion-open');
+        console.log("show answer-text");
+        if ($(this).parent('li').hasClass('accordion_closed')) {
+            $(this).parent('li').removeClass('accordion_closed').addClass('accordion_open');
         } 
     });
     
     $('.answer-text').on('hidden', function () {
-        if ($(this).parent('li').hasClass('accordion-open')) {
-            $(this).parent('li').removeClass('accordion-open').addClass('accordion-closed');
+        console.log("hidden answer-text");
+        if ($(this).parent('li').hasClass('accordion_open')) {
+            $(this).parent('li').removeClass('accordion_open').addClass('accordion_closed');
         } 
     });
     
                 {% endif %}
              <h2 class="title">Have a Question?</h2>
              <h3 class="subtitle">With any luck, we already have an answer.</h3>
-              <div class="faq-search">
+             <div class="faq-search">
                 <div class="faq-search-input-area">
                     <form method="#">                   
                         <input ng-model="userq" type="text" id="id_faq_search" name="faqSearch" placeholder="Type a Keyword">
                                 <a href="#" class="faq-back">Back</a>
                                 <h4>About Nutrition</h4>
                             </div><!-- / faq questions header -->
-                            <ul class="faq-questions-list" ng-repeat="faq in questions.objects | filter:userq">
-                                <li data-toggle="collapse" data-target="#answer-text-{{ faq.id }}" class="accordion-question accordion-closed">
+                            <ul class="faq-questions-list">
+                                <li ng-repeat="faq in questions.objects | filter:userq" data-toggle="collapse" data-target="#answer-text-{{ faq.id }}" class="accordion-question accordion_closed" ng-click="faq.selected=!faq.selected" ng-class="{ 'accordion_open' : faq.selected }">
                                     <span class="question-text">{{ faq.post_title }}</span>
                                     <div class="collapse answer-text" id="answer-text-{{ faq.id }}" ng-bind-html-unsafe="faq.post_content"></div>
                                 </li>
                                 <h4>About Low-Fat Cooking</h4>
                             </div><!-- / faq questions header -->
                             <ul class="faq-questions-list">
-                                <li data-toggle="collapse" data-target="#answer-text-4" class="accordion-question accordion-closed"><span class="question-text">Example of a question might go here?</span>
+                                <li data-toggle="collapse" data-target="#answer-text-4" class="accordion-question accordion_closed"><span class="question-text">Example of a question might go here?</span>
                                     <div class="collapse answer-text" id="answer-text-4">
                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
                                         <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
                                     </div>
                                 </li>
                                 
-                                <li data-toggle="collapse" data-target="#answer-text-5" class="accordion-question accordion-closed"><span class="question-text">Another example question in this category?</span>
+                                <li data-toggle="collapse" data-target="#answer-text-5" class="accordion-question accordion_closed"><span class="question-text">Another example question in this category?</span>
                                     <div class="collapse answer-text" id="answer-text-5">
                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
                                         <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
                                     </div>
                                 </li>
                                 
-                                <li data-toggle="collapse" data-target="#answer-text-6" class="accordion-question accordion-closed"><span class="question-text">Don't forget to dynamically generate CSS ids?</span>
+                                <li data-toggle="collapse" data-target="#answer-text-6" class="accordion-question accordion_closed"><span class="question-text">Don't forget to dynamically generate CSS ids?</span>
                                     <div class="collapse answer-text" id="answer-text-6">
                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
                                         <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
                                 <h4>About Substitutions</h4>
                             </div><!-- / faq questions header -->
                             <ul class="faq-questions-list">
-                                <li data-toggle="collapse" data-target="#answer-text-7" class="accordion-question accordion-closed"><span class="question-text">Example of a question might go here?</span>
+                                <li data-toggle="collapse" data-target="#answer-text-7" class="accordion-question accordion_closed"><span class="question-text">Example of a question might go here?</span>
                                     <div class="collapse answer-text" id="answer-text-7">
                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
                                         <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
                                     </div>
                                 </li>
                                 
-                                <li data-toggle="collapse" data-target="#answer-text-8" class="accordion-question accordion-closed"><span class="question-text">Another example question in this category?</span>
+                                <li data-toggle="collapse" data-target="#answer-text-8" class="accordion-question accordion_closed"><span class="question-text">Another example question in this category?</span>
                                     <div class="collapse answer-text" id="answer-text-8">
                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
                                         <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
                                     </div>
                                 </li>
                                 
-                                <li data-toggle="collapse" data-target="#answer-text-9" class="accordion-question accordion-closed"><span class="question-text">Don't forget to dynamically generate CSS ids?</span>
+                                <li data-toggle="collapse" data-target="#answer-text-9" class="accordion-question accordion_closed"><span class="question-text">Don't forget to dynamically generate CSS ids?</span>
                                     <div class="collapse answer-text" id="answer-text-9">
                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
                                         <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
                                 <h4>About Just Getting Started</h4>
                             </div><!-- / faq questions header -->
                             <ul class="faq-questions-list">
-                                <li data-toggle="collapse" data-target="#answer-text-10" class="accordion-question accordion-closed"><span class="question-text">Example of a question might go here?</span>
+                                <li data-toggle="collapse" data-target="#answer-text-10" class="accordion-question accordion_closed"><span class="question-text">Example of a question might go here?</span>
                                     <div class="collapse answer-text" id="answer-text-10">
                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
                                         <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
                                     </div>
                                 </li>
                                 
-                                <li data-toggle="collapse" data-target="#answer-text-11" class="accordion-question accordion-closed"><span class="question-text">Another example question in this category?</span>
+                                <li data-toggle="collapse" data-target="#answer-text-11" class="accordion-question accordion_closed"><span class="question-text">Another example question in this category?</span>
                                     <div class="collapse answer-text" id="answer-text-11">
                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
                                         <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
                                     </div>
                                 </li>
                                 
-                                <li data-toggle="collapse" data-target="#answer-text-12" class="accordion-question accordion-closed"><span class="question-text">Don't forget to dynamically generate CSS ids?</span>
+                                <li data-toggle="collapse" data-target="#answer-text-12" class="accordion-question accordion_closed"><span class="question-text">Don't forget to dynamically generate CSS ids?</span>
                                     <div class="collapse answer-text" id="answer-text-12">
                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
                                         <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
                     </div>
                 </div><!-- /search-wrapper -->
             </div><!-- / faq search -->
-                <h3 class="subtitle">Still need to contact Lindsay?</h2>
-                <form action="/about/contact/" method="post">
-                    {% csrf_token %}
-                    <hr style="clear:both;">
-                    <p style="clear:both;">
-                        <h4 class="contactlindsay">Still need to Contact Lindsay?</h4>
-                        <textarea id="id_message" rows="10" cols="40" name="message" class="span5" placeholder="Type your message here..."></textarea>
-                    </p>
-                    <p>
-                        <span class="add-on"><i class="icon-user"></i></span> 
-                        <input type="text" name="name" id="id_name" placeholder="Name">
-                    </p>
-                    <p>
-                        <i class="icon-envelope"></i> 
-                        <input type="text" name="email" id="id_email" placeholder="Email">
-                    </p>
-                    <input type="submit" value="Send Email">
-                </form>
-            </div>
+            <h3 class="subtitle">Still need to contact Lindsay?</h2>
+            <form action="/about/contact/" method="post">
+                {% csrf_token %}
+                <hr style="clear:both;">
+                <p style="clear:both;">
+                    <h4 class="contactlindsay">Still need to Contact Lindsay?</h4>
+                    <textarea id="id_message" rows="10" cols="40" name="message" class="span5" placeholder="Type your message here..."></textarea>
+                </p>
+                <p>
+                    <span class="add-on"><i class="icon-user"></i></span> 
+                    <input type="text" name="name" id="id_name" placeholder="Name">
+                </p>
+                <p>
+                    <i class="icon-envelope"></i> 
+                    <input type="text" name="email" id="id_email" placeholder="Email">
+                </p>
+                <input type="submit" value="Send Email">
+            </form>
+        </div>
 
-          </div>
-      </div>
+    </div>
+  </div>
 
   </div><!-- / outer-wrapper -->