Update member detail packages to have description open / close

Adding in the package description to the member detail pages when
showing the packages so they can be opened closed like on the new
package listing page.

diff --git a/css/front.css b/css/front.css
index 3e24fd0..1ade225 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -227,13 +227,15 @@ div.member div.address {
     width: 100%;
 }
 
-#glm-member-packaging-front-container .glm-member-packaging-data-container > .glm-member-db-package-list-content-data {
+/* #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 {
+/* #glm-member-packaging-front-container  */
+.glm-member-packaging-data-container > .glm-member-db-package-list-content-toggle {
     width: 100%;
     border-radius: 4px;
     background: #fefefe;
@@ -243,17 +245,20 @@ div.member div.address {
     float: left;
     cursor: pointer;
 }
-#glm-member-packaging-front-container .glm-member-packaging-data-container > .glm-member-db-package-list-content-toggle:nth-child(n-1) {
+/* #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 {
+/* #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;
 }
-#glm-member-packaging-front-container .glm-member-packaging-data-container > .glm-member-db-package-list-content-toggle.selected:after {
+/* #glm-member-packaging-front-container  */
+.glm-member-packaging-data-container > .glm-member-db-package-list-content-toggle.selected:after {
     content: "-";
-}
\ No newline at end of file
+}

diff --git a/views/front/packaging/listForMemberDetail.html b/views/front/packaging/listForMemberDetail.html
index 1c579de..0e7109e 100644 (file)
--- a/views/front/packaging/listForMemberDetail.html
+++ b/views/front/packaging/listForMemberDetail.html
@@ -1,7 +1,7 @@
 {if $settings.detail_show_packages && $havePackages && $packages}
 <div id="glm-member-detail-packages-toggle" class="glm-member-detail-content-toggle">Packages & Deals</div>
 <div id="glm-member-detail-packages-container" class="glm-member-detail-content-data small-12">
-    
+
 
     {foreach $packages as $p}
 
@@ -11,7 +11,7 @@
             {if $p.image}
              <div class="glm-member-db-package-img-wrap">
               <img src="{$glmPluginMediaUrl}/images/medium/{$p.image}">
-             </div> 
+             </div>
             {/if}
             <!-- Container for package information -->
             <div class="glm-member-db-package-info">
@@ -33,13 +33,48 @@
                     {if $p.pricing}<div><span class="title">Pricing: </span><span class="data">{$p.pricing}</span></div>{/if}
                 </div>
             </div>
+                                            {if $p.descr}
+                                            <div class="glm-member-packaging-data-container">
+                                                <div id="glm-member-db-package-list-description-toggle-{$p.id}" class="glm-member-db-package-list-content-toggle">Description</div>
+                                                <div id="glm-member-db-package-list-description-container-{$p.id}" class="glm-member-db-package-list-content-data">
+                                                    <div id="glm-member-db-package-list-description-{$p.id}">
+                                                         {$p.descr|wpautop}
+                                                    </div>
+                                                    <div class="glm-member-db-package-list-sub-data-links">
+                                                        <a class="glm-member-db-package-list-content-toggle">Collapse</a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            {/if}
 
         </div>
     {/foreach} <!-- /package -->
-    
+
     <div class="glm-member-detail-sub-data-links row">
         <a class="left glm-member-detail-content-toggle">Collapse</a>
         <a class="right link-to-top">Back to top</a>
     </div>
 </div>
 {/if}
+<script type="text/javascript">
+        jQuery(document).ready(function($) {
+            // Open or close a section if its corresponding toggle is clicked
+            $(".glm-member-db-package-list-content-toggle").click(function() {
+
+                // If this is a child of sub-data-links (the 'Collapse' link)
+                if($(this).parents('.glm-member-db-package-list-sub-data-links').length) {
+                    // Retrieve the id from a higher level instead
+                    // based on: glm-member-db-package-list-description-container-{$p.id}
+                    // grabs the last 6 characters in case of a large ID
+                    var target = $(this).parent().parent().attr("id").slice(49, 55);
+                } else {
+                    // based on: glm-member-db-package-list-description-toggle-{$p.id}
+                    // grabs the last 6 characters in case of a large ID
+                    var target = $(this).attr("id").slice(46, 52);
+                }
+                $("#glm-member-db-package-list-description-container-"+target).slideToggle("fast", "swing",  function() {});
+                $("#glm-member-db-package-list-description-toggle-"+target).toggleClass("selected");
+
+            });
+        }); // jquery
+    </script>