Spry Data and Accordion

Question

Hi,
I having a problem with spry and accordion.
If I do this (1a) then the accordion no longer works.
1a.
      <div id="Accordion2" class="Accordion" tabindex="0" spry:detailregion="data">
        <div class="AccordionPanel">
          <div class="AccordionPanelTab"><div>About "{Title}"</div></div>
          <div class="AccordionPanelContent about_art">
            <div class="artwork_descript">{Quote}</div>
          </div>
Now I'm sure some might say just do this then (1b) which works fine.
1b.
      <div id="Accordion2" class="Accordion" tabindex="0" >
        <div class="AccordionPanel">
          <div class="AccordionPanelTab"><div spry:detailregion="data">About "{Title}"</div></div>
          <div class="AccordionPanelContent about_art">
            <div class="artwork_descript" spry:detailregion="data">{Quote}</div>
          </div>
Well there is more to it. Really the final goal is this (2a). I want the accordion to only show if there is data to populate it.
This works fine as far as the data is concerned but having spry:detailregion="data" in any of the top two divs breaks it and it no longer drops down.
2a.
      <div id="Accordion2" class="Accordion" tabindex="0" spry:detailregion="data" spry:if="'{Quote}' != ''">
        <div class="AccordionPanel">
          <div class="AccordionPanelTab"><div>About "{Title}"</div></div>
          <div class="AccordionPanelContent about_art">
            <div class="artwork_descript">{Quote}</div>
          </div>
        </div>
So my thought is I need to add some kind of observer but I'm not sure exactly what is needed or if an observer is even the right way to go. Any help is appreciated.
Thank you.

Answer 1

Hi Gramps,
The example you linked is the same as what I put in 1b and that works fine. Thats not what I am trying to do.
Going from the example you linked I will explain further.
See in the example how you click the link on the left and in the accordion "Product Overview" and "New Features" get populated with new data.
So what I am trying to do is; lets say I click on the left for a specific item that does not have "New Features"  so the only accordion to show would be "Product Overview". And "New Features" would disappear (not show).
That was the code I put in 2a.
2a.
      <div id="Accordion2" class="Accordion" tabindex="0" spry:detailregion="data" spry:if="'{Quote}' != ''">
        <div class="AccordionPanel">
          <div class="AccordionPanelTab"><div>About "{Title}"</div></div>
          <div class="AccordionPanelContent about_art">
            <div class="artwork_descript">{Quote}</div>
          </div>
        </div>
While this works to not show the accordion "New Features" it breaks the accordion function as a whole.
So the question is it possible to have the accordion function work like that?
Thank you for taking the time to look over my post.
Albert.