6 Replies Latest reply: Nov 16, 2009 10:55 AM by onefiftymph RSS

    How to add a "close" btn. in bottom of open Collapsible Spry panel?

    onefiftymph Community Member

      ...so you don't have to scroll back up to the top when you're finished reading.

      e.g. - I want to be able to click something under the lengthy text at bottom of the "Trip Report" collapsible panel that closes the panel:

       

      http://planetrambler.com/150mph/090914-18_GreatWesternDivide/index.html

       

      thanks!

        • 2. Re: How to add a "close" btn. in bottom of open Collapsible Spry panel?
          onefiftymph Community Member

          Thanks. I'm glad it can be done, but I'm a beginner and don't know enough to do it. I experimented putting different stuff that looks relevant -

           

          <a href="#" class="close">Close Panel</a>

           

          at the bottom of the spry panel where I want the btn, but clicking the link only jump-scrolls the page up to the top again and doesn't close the panel. Can you tell me where I put what out of this:

           

           

          <p><a href="#" class="open">Open Panel</a> | <a href="#" class="close">Close Panel</a> </p>
          <div id="CollapsiblePanel4" class="CollapsiblePanel">
            <div class="CollapsiblePanelTab"><a href="#">Open Panel with Link </a></div>
            <div class="CollapsiblePanelContent">
              <p>This Collapsible Panel is opened and closed with a link. </p>
            </div>

           

           

          Do I need to add something in head? thank you!

          • 3. Re: How to add a "close" btn. in bottom of open Collapsible Spry panel?
            DwFAQ Community Member

            Yeah you need to put something in the head. Put the codes that reference the scripts like in the example. Sorry I don't have time to walk you through the entire process. You may have to download spry and read up on it a little. It may help you try and build a simple functioning page based off the example by copying the code and scripts to your local folder and seeing if you can get it working and then once you've done that you can try to implement it into your current site. Just make sure the scripts are referenced in the correct directories of your site when viewing the source code in the example and building the function locally. Like in the example there's all those references to javascript files that you'd need on your page to make the function work.

            • 4. Re: How to add a "close" btn. in bottom of open Collapsible Spry panel?
              onefiftymph Community Member

              Ok thanks DWfaq... will see if I can make it work in a reasonable amount of time

              • 5. Re: How to add a "close" btn. in bottom of open Collapsible Spry panel?
                Nate Baldwin Community Member

                You're missing the JavaScript code that does the actual closing based on the class name. In the example that DwFAQ linked to, it's in a separate JavaScript file (to be unobtrusive). In your page, it may as well go in with the rest of the JavaScript that defines the Spry panels. Down towards the bottom of your page, find the Spry code, such as:

                 

                var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5");
                

                 

                ...and add after it something like this to trigger the closing:

                 

                var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5");
                Spry.$$(".close5").addEventListener("click", function(e){ CollapsiblePanel5.close(); return false;}, false);
                
                

                 

                So, make the class on the close link "close5" to close the 5th panel, and make sure the variable name is set to match as CollapsiblePanel5 as the above. If something in there doesn't make sense, post back and I'll try to clarify.

                • 6. Re: How to add a "close" btn. in bottom of open Collapsible Spry panel?
                  onefiftymph Community Member

                  Thanks very much for your response Nate. Sorry it's been so long following up with thanks - I'm just now getting time to get back to this problem and hope you're still available to help.

                   

                  I've put your code in Collapsible panel 2, (changed the numbers accordingly) as you said.

                   

                  I replaced:

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

                   

                  with:

                  var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
                  Spry.$$(".close2").addEventListener("click", function(e){ CollapsiblePanel2.close(); return false;}, false);

                   

                  But I'm getting bad results and know I'm missing something important. With your code in place:

                  - The collapsible panels 3,4,5 under this one don't work. 3 & 4 load open, not closed as specified.

                  - Where in your example code would I add the text link to make the panel close? The text link I want to use is Close Report Panel

                   

                  Test page:

                   

                  http://planetrambler.com/x2/

                   

                  "Report" = collapsible panel is #2

                   

                  TIA!