Skip navigation
Wheech
Currently Being Moderated

How to open Accordion by row select using Products Demo Example

Dec 10, 2010 10:08 AM

Hi...

I have the products demo http://labs.adobe.com/technologies/spry/demos/products/ that comes with the spry examples setup on this site: www.t-plan.com...

 

You will see that the Accordion has been set to be collapsed on initial page load.

 

However what I would like to do is when someone selects / mouseover a product in the side panel - that this action actually open the accordion below and displays the Product Overview etc.

 

Please help.. I have been googling for hours... I have found examples to open individual accordions based on their ID or name in this article: http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSam ple.html

This page prompts a use of: "<a href="#" onclick="acc1.openFirstPanel(); return false;">First</a>"

But...

I think the problem here is that because the spry example uses the SpryData and SpryHTMLDataSet to load the html from the page... the accordions are not numbered?

 

I am not a developer and have got this far... last steps are always the hardest!

 

Thanks in advance,

 

Charlie

 
Replies
  • Currently Being Moderated
    Dec 10, 2010 4:43 PM   in reply to Wheech

    Try

    <!DOCTYPE html>
    <html>
    <head>
    <title>Untitled Document</title>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
    <style>
    html {height: 100%;    overflow-y: scroll;}
    body{margin: 30px auto; width: 960px; background: #CF6; height: 100%;}
    .col30{float: left; width: 29%;}
    .col70{float: right; width: 69%;}
    </style>
    </head>
    <body>
    <div class="col30">
      <div><a href="#" onmouseover="Accordion1.openPanel(0); return false;">Open first panel</a></div>
      <div><a href="#" onmouseover="Accordion1.openPanel(1); return false;">Open second panel</a></div>
    </div>
    <div id="Accordion1" class="Accordion col70" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 1</div>
        <div class="AccordionPanelContent">Content 1</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 2</div>
        <div class="AccordionPanelContent">Content 2</div>
      </div>
    </div>
    <script src="SpryAssets/SpryAccordion.js"></script>
    <script>var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1 });</script>
    </body>
    </html>

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 12, 2010 3:38 AM   in reply to Wheech

    Hi Charlie,

     

    It is very hard to judge the competency level of the posters to this forum. Sometimes the poster is confused because the answer is leveled at a higher level; other times the poster complains of a condescending attitude. My apologies.

     

    The example I gave was to show that it could be done.

     

    The important parts in my example are

      <a href="#" onmouseover="Accordion1.openPanel(0); return false;">Open first panel</a>
      <a href="#" onmouseover="Accordion1.openPanel(1); return false;">Open second panel</a>

    These are the links that will open the relevant panel when they receive a mousover event. Accordion1 can be renamed to whatever you have ID'd your accordion namely Acc1. Open first panel and Open second panel can be changed - even replaced with an image.

     

    The next important part is

    <script>var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1 });</script>

    where useFixedPanelHeights: false is important for it to work and defaultPanel: -1 makes sure that all panels are closed when the page is loaded. As above Accordion1 should be renamed to Acc1.

     

    I hope this helps,

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 12, 2010 2:14 PM   in reply to Wheech

    Charlie,

     

    I am confused. When I look at the site www.t-plan.com I do not see a Spry accordion nor do I see the Spry products demo.

     

    Please bear with an old man, what is it exactly what you want to do on your site.

     

    Gramps.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 13, 2010 2:52 PM   in reply to Wheech

    As much as I would like to help, you are not using any form of SpryAccordion in your document despite link to the JS file for same.

     

    The only Spry widget that you are using is the SpryMenuBar as can be seen with the use of the following constructor

    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>

    There is no such constructor for the accordion widget.

     

    Thus I cannot help you my friend.

    Gramps.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 14, 2010 2:35 AM   in reply to Wheech

    With reference to the link to the Products Demo Example, at the bottom of the document you will notice

    <script type="text/javascript">
    <!--
    var Acc1 = new Spry.Widget.Accordion("Acc1");
    -->
    </script>

    which means that an instance of the Spry.Widget.Accordion has been created. This I could not find in your document which means that you have not created an instance of name widget.

     

    Of course I could be wrong (age related), in which case I would love you to point this out.

     

    Gra,ps

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 14, 2010 2:44 PM   in reply to Wheech

    Charlie,

     

    You have proved that I was wrong, I did not realise that part of the JS had been externalised.

     

    In my example I showed you to change the constructor to (adjusted to suit your situation)

    var acc = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });

    and to add a mouse event to the part that changes the data within the accordion as per

    <div class="productfont" onmouseover="Acc1.openPanel(0); return false;>Professional</div>

    Cheers,

    Ben

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 4, 2011 6:40 AM   in reply to Wheech

    Hi Charlie,

     

    sorry, I thought I might get an answer in your dialogue ...  I couldn't give an answer but I really like the arrows in the headlines (top tabs) of the Spry menue (before product overview and product features.) showing the user that there is some content. Would you mind to tell me how to implement them on my website.

     

    Thx in advance, I. 

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points