Adding collapsible Description dropdown to package list pages

diff --git a/css/front.css b/css/front.css
index 55e7a06..531fc41 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -208,3 +208,46 @@ div.member div.address {
 .glm-member-package-list-wrapper .glm-member-list-image-border img {
     border-radius: 4px;
 }
+
+
+#glm-member-packaging-front-container {
+    display: block;
+    clear: both;
+}
+.glm-member-packaging-data-container {
+    display: block;
+    background-color: white;
+    float: left;
+    width: 100%;
+    border-radius: 4px;
+}
+.glm-member-db-package-list-sub-data-links {
+    padding: 10px;
+}
+
+#glm-member-packaging-front-container .glm-member-packaging-data-container > .glm-member-db-package-list-content-data {
+    display: none;
+    float: left;
+    width: 100%;
+    padding: 10px;
+}
+#glm-member-packaging-front-container .glm-member-packaging-data-container > .glm-member-db-package-list-content-toggle {
+    width: 100%;
+    border-radius: 4px;
+    background: #fefefe;
+    color: #57b649;
+    font-size: 18px;
+    padding: 10px;
+    float: left;
+}
+#glm-member-packaging-front-container .glm-member-packaging-data-container > .glm-member-db-package-list-content-toggle:nth-child(n-1) {
+    border-width: 0 0 1px 0;
+    border-style: solid;
+    border-color: lightgrey;
+}
+#glm-member-packaging-front-container .glm-member-packaging-data-container > .glm-member-db-package-list-content-toggle:after {
+    content: "+";
+    float: right;
+    font-size: 24px;
+    line-height: 1;
+}
\ No newline at end of file

diff --git a/views/front/packaging/list.html b/views/front/packaging/list.html
index 09335a8..ebe4739 100644 (file)
--- a/views/front/packaging/list.html
+++ b/views/front/packaging/list.html
@@ -20,7 +20,7 @@
             <!-- /member -->
             {foreach $members as $m}
 
-                <div class="glm-member-list-container glm-package-list-container glm-member-container small-12 columns">
+            <div class="glm-member-list-container glm-package-list-container glm-member-container small-12 columns">
 
                 <!-- Member Logo - Medium and up-->
                     <div class="glm-member-list-data small-12 columns">
@@ -107,6 +107,19 @@
                                                     <div><span class="glm-member-db-package-detail-title">Pricing: </span><span class="glm-member-db-package-detail-data">{$p.pricing}</span></div>
                                                 {/if}
                                             </div> <!-- /package details -->
+                                            {if $p.descr}
+                                            <div class="glm-member-packaging-data-container">
+                                                <div id="glm-member-db-package-list-description-toggle" class="glm-member-db-package-list-content-toggle">Description</div>
+                                                <div id="glm-member-db-package-list-description-container" class="glm-member-db-package-list-content-data">
+                                                    <div id="glm-member-db-package-list-description" >
+                                                         {$p.descr|nl2br}
+                                                    </div>
+                                                    <div class="glm-member-db-package-list-sub-data-links row">
+                                                        <a class="glm-member-db-package-list-content-toggle">Collapse</a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            {/if}
                                         </div> <!-- /package info container -->
                                     </div> <!-- /package-container -->
                                 {/foreach} <!-- /package -->
@@ -174,3 +187,19 @@
 </div> <!-- /package wrapper -->
 </div> <!-- packaging list wrapper -->
 {include file='front/footer.html'}
+
+    <script type="text/javascript">
+        jQuery(document).ready(function($) {
+            // Open or close the appropriate section if a toggle is clicked
+            $(".glm-member-db-package-list-content-toggle").click(function() {
+                if($(this).parents('.glm-member-db-package-list-sub-data-links').length) {
+                    var target = $(this).parent().parent().attr("id").slice(0, -10);
+                } else {
+                    var target = $(this).attr("id").slice(0, -7);
+                }
+                $("#"+target+"-container").slideToggle("fast", "swing",  function() {});
+                $("#"+target+"-toggle").toggleClass("selected");
+                fullProfileCheck(target);
+            });
+        }); // jquery
+    </script>
\ No newline at end of file