5 Replies Latest reply on May 23, 2011 7:04 AM by BenPleysier

    Can I "reuse" spry collabsible panel code?

    garynng Level 1

      I have a spry collapsible panel (actually inside a spry tabbed panel).  The first 3 tabs have unique information in them and the collapsible panel works fine.  What I want is to copy the info from the first 3 tabs into the 4th tab, which is "ALL INFO".

       

      I swear when I did this earlier it worked, but I could be wrong.  As of right now it does not work so my basic question is whether it is possible to cut and paste the spry code and use it somewhere else on the page.  I am hoping you do not say I need to recreate all the spry panels whenever I want to use them again

       

      Does that make sense?  Let me clarify to make sure:

       

      TAB 1

      Mary had a little .....

      click to see more (panel starts closed and expands when you click)

       

      TAB 2 (want to repeat it)

      Mary had a little....

      click to see more (panel automatically is open and does not close)

      lamb.

        • 1. Re: Can I "reuse" spry collabsible panel code?
          370H55V Level 4

          If you have spry colapsible panels on multiple pages, it IS just a matter of copying the collapsible panel code  to each page ALONG WITH the links in the <head> to the js and css files, AND the script at the end of the <body> element (otherwise it WON'T work).

           

          If you have multiple collapsible panels in a single page you CAN copy the code, BUT... you have to ID each panel incrementally:

          <div id="CollapsiblePanel1" class="CollapsiblePanel">

          <div id="CollapsiblePanel2" class="CollapsiblePanel">

          <div id="CollapsiblePanel3" class="CollapsiblePanel">

          <div id="CollapsiblePanel4" class="CollapsiblePanel">   etc. etc.

           

          and you NEED to add additonal lines in the ending script:

          var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1",{contentIsOpen:false});

          var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2",{contentIsOpen:false});

          var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3",{contentIsOpen:false});

          var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4",{contentIsOpen:false});

           

          Notice the last option in each of those lines. {contentIsOpen:false}   that determines the default state of the panel, false being closed and true being open.

           

          It's easier to use an accordion rather than stacking collapsible panels in a cloumn.

          • 2. Re: Can I "reuse" spry collabsible panel code?
            garynng Level 1

            Yes, that's how I did it but it does not allow the second panel (the one I copied) to open. Below is the code where I just use it once.  Everything works fine.

             

             

            Here is the code:

             

            <div class="TabbedPanelsContentGroup">
             
              <!--this starts the artist info-->

             

                <div id="artistBox"> 
                    <div id="albumCover"><a href="images/album art/carly_500.jpg" title="Carly Allyse from Carlsbad." rel="lightbox"><img src="images/album art/carly_100.jpg" /></a><br />
                    </div>
                    <!--dewPlayer-->
                    <div id="dewPlayerLeftColumn">
                      <object type="application/x-shockwave-flash" data="dewplayer/dewplayer.swf" width="300" height="20" id="dewplayer" name="dewplayer">
                        <param name="movie" value="dewplayer/dewplayer.swf" />
                        <param name="flashvars" value="mp3=mp3s/carlyAllyse_somday.mp3" />
                        <param name="wmode" value="transparent" />
                      </object>
                    </div>
                    <!--close dewPlayerLeftColumn-->
                   
                    <h3>Carly Allyse / Someday</h3><!--name of song and artist-->
                    <p><strong>Hometown</strong>:  Carlsbad   <strong>Genre</strong>:  Coffee House Acoustic</p>
                    <p>Recorded &quot;live&quot; on Portland radio, Carly Allyse played her first gig at Encinitas E Street Cafe.  Recorded &quot;live&quot; on Portland radio...</p>
                    <!--add spry below-->   
                   
                <div class="TabbedPanelsContent">
                  <div id="CollapsiblePanel1" class="CollapsiblePanel">
                    <div class="CollapsiblePanelTab" tabindex="0">click to read more</div>
                    <div class="CollapsiblePanelContent">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>

             

            Now I will copy the collapsible panel and paste it right underneath it.


            Here is the code:

             

               <div id="artistBox"> 
                    <div id="albumCover"><a href="images/album art/carly_500.jpg" title="Carly Allyse from Carlsbad." rel="lightbox"><img src="images/album art/carly_100.jpg" /></a><br />
                    </div>
                    <!--dewPlayer-->
                    <div id="dewPlayerLeftColumn">
                      <object type="application/x-shockwave-flash" data="dewplayer/dewplayer.swf" width="300" height="20" id="dewplayer" name="dewplayer">
                        <param name="movie" value="dewplayer/dewplayer.swf" />
                        <param name="flashvars" value="mp3=mp3s/carlyAllyse_somday.mp3" />
                        <param name="wmode" value="transparent" />
                      </object>
                    </div>
                    <!--close dewPlayerLeftColumn-->
                   
                    <h3>Carly Allyse / Someday</h3><!--name of song and artist-->
                    <p><strong>Hometown</strong>:  Carlsbad   <strong>Genre</strong>:  Coffee House Acoustic</p>
                    <p>Recorded &quot;live&quot; on Portland radio, Carly Allyse played her first gig at Encinitas E Street Cafe.  Recorded &quot;live&quot; on Portland radio...</p>
                    <!--add spry below-->   
                   
                <div class="TabbedPanelsContent">
                  <div id="CollapsiblePanel1" class="CollapsiblePanel">
                    <div class="CollapsiblePanelTab" tabindex="0">click to read more</div>
                    <div class="CollapsiblePanelContent">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>

             

                </div>
                
                </div><!--close artist info-->
               
                 <div id="artistBox"> 
                    <div id="albumCover"><a href="images/album art/carly_500.jpg" title="Carly Allyse from Carlsbad." rel="lightbox"><img src="images/album art/carly_100.jpg" /></a><br />
                    </div>
                    <!--dewPlayer-->
                    <div id="dewPlayerLeftColumn">
                      <object type="application/x-shockwave-flash" data="dewplayer/dewplayer.swf" width="300" height="20" id="dewplayer" name="dewplayer">
                        <param name="movie" value="dewplayer/dewplayer.swf" />
                        <param name="flashvars" value="mp3=mp3s/carlyAllyse_somday.mp3" />
                        <param name="wmode" value="transparent" />
                      </object>
                    </div>
                    <!--close dewPlayerLeftColumn-->
                   
                    <h3>Carly Allyse / Someday</h3><!--name of song and artist-->
                    <p><strong>Hometown</strong>:  Carlsbad   <strong>Genre</strong>:  Coffee House Acoustic</p>
                    <p>Recorded &quot;live&quot; on Portland radio, Carly Allyse played her first gig at Encinitas E Street Cafe.  Recorded &quot;live&quot; on Portland radio...</p>
                    <!--add spry below-->   
                   
                <div class="TabbedPanelsContent">
                  <div id="CollapsiblePanel1" class="CollapsiblePanel">
                    <div class="CollapsiblePanelTab" tabindex="0">click to read more</div>
                    <div class="CollapsiblePanelContent">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>

             

                </div>
                </div>
                
                </div><!--close artist info-->

             

                </div>
                
                </div><!--close artist info-->

             

            But now the second box is always open.

             

             

            I know I can change the code to call this collapsible panel 2 (or whatever is next available) but since I am doing a bunch of these I would rather just cut and paste it if possible.  (Note that on the site I am not pasting right below but rather in another tab - but the same thing happens).

             

            Any suggestions?

            • 3. Re: Can I "reuse" spry collabsible panel code?
              garynng Level 1

              Sorry, the pics did not post.

               

              Example 1:  Works fine

               

              panel1.JPG

              example 2: Copied the code and now the second panel is always open.

              panel2.JPG

              • 4. Re: Can I "reuse" spry collabsible panel code?
                370H55V Level 4

                You're either copying and pasting more than you should or less than you should.

                 

                When you create a new collapsible panel, you need to copy the entire div from the first one and paste it below. Then make the necessary changes (name it collapsiblePanel2 or whatever, and add another var to the script at the bottom of the page). When you go to make it unique from the other one, the ONLY place to be editing is in the collapsiblePanelContent div.

                 

                Straying from these parameters will cause the panel to stop working, in other words, to stay open all the time.

                • 5. Re: Can I "reuse" spry collabsible panel code?
                  BenPleysier Adobe Community Professional & MVP

                  You can use Spry.Widget.CollapsiblePanelGroup as in

                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <title>Untitled Document</title>
                  <link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet">
                  </head>

                  <body>
                  <div id="CollapsiblePanelGroup1" class="CollapsiblePanelGroup">
                      <div class="CollapsiblePanel">
                          <div class="CollapsiblePanelTab" tabindex="0">Panel 1</div>
                          <div class="CollapsiblePanelContent">
                              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                              minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                              ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                              voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                              sint occaecat cupidatat non proident, sunt in culpa qui officia
                              deserunt mollit anim id est laborum.</p>
                          </div>
                      </div>

                      <div class="CollapsiblePanel">
                          <div class="CollapsiblePanelTab" tabindex="0">Panel 2</div>
                          <div class="CollapsiblePanelContent">
                              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                              minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                              ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                              voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                              sint occaecat cupidatat non proident, sunt in culpa qui officia
                              deserunt mollit anim id est laborum.</p>
                          </div>
                      </div>
                      <div class="CollapsiblePanel">
                          <div class="CollapsiblePanelTab" tabindex="0">Panel 3</div>

                          <div class="CollapsiblePanelContent">
                              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                              minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                              ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                              voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                              sint occaecat cupidatat non proident, sunt in culpa qui officia
                              deserunt mollit anim id est laborum.</p>
                          </div>
                      </div>
                  </div><script src="SpryAssets/SpryCollapsiblePanel.js"></script>
                  <script>
                  var cpg1 = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup1", { contentIsOpen: false });
                  </script>
                  </body>
                  </html>

                  You will notice that the only difference between each panel is the text for the tab.

                   

                  Gramps