Problems with Accordion Layout

[tslatt]

I'm having trouble placing multiple accordion layouts on the same page. Instead of using the id to initialize the accordions, I want to use the class name:

Code:

$('.accordion-menu').accordion({
   fit: true,
   animate: false
});

That way I can call the initialization once for all accordions, instead of initializing each one individually.

Another reason for doing this by class name rather than id is that I may need to have two accordions of the same type on the same page, and I'd like to pull the code for that from an include, so I cannot set an id on the accordion (id's must be unique).

For example:

Code:

Carol's Info:<br/>
<% userid = 345 %>
<!-- #include file="include/userinfo.inc"-->

Bob's Info:<br/>
<% userid = 678 %>
<!-- #include file="include/userinfo.inc"-->

userinfo.inc:

Code:

<div class="easyui-accordion accordion-menu">
   <div title="User ID" selected="true">
      <%=userid%>
   </div>
   <div title="Name">
      <%=ShowName(userid)%>
   </div>
</div>

However, I've had mixed results. Has anyone been able to achieve this, or does anyone have any thoughts?

Any help would be greatly appreciated.

[stworthy]

Put your accordion component in separate <div> container:

Code:

Carol's Info:<br/>
<% userid = 345 %>
<div style="width:300px;height:200px;">
<!-- #include file="include/userinfo.inc"-->
</div>

Bob's Info:<br/>
<% userid = 678 %>
<div style="width:300px;height:200px;">
<!-- #include file="include/userinfo.inc"-->
</div>

[tslatt]

I tried your suggestion. After a little experimentation it fixed most of the problems that happened when I switched from using ids to using class names to initialize the accordions. The style I put on the div was "width: 100%; height: auto;" (percent instead of px), since I need my accordions to fill the space and the panels the accordions are in grow/shrink with the browser. Here's what happened:

My accordions are inside panels. I initialize them using the class name like this:

Code:

<script type="text/javascript">
$(document).ready(function() {
  $('.accordian-menu').accordion({
    fit: true,
    animate: false
  });
});
</script>

First I tried putting the suggested div around the accordion, inside the panel, which resulted in the accordions being squashed width-wise inside the panels:

Code:

<div class="easyui-panel" title="My Panel Title"><!-- begin panel -->
  <div style="width: 100%; height: auto;"><!-- begin suggested div -->
    <div class="easyui-accordion accordian-menu"><!-- begin accordion -->
      <div title="Accordion Item One" selected="true">
        <div style="width: 100%;">This is text in a div.</div>
      </div>
      <div title="Accordion Item Two">
        <table width="100%">
          <tr>
            <td>This is text in a table.</td>
          </tr>
        </table>
      </div>
    </div><!-- end accordion -->
  </div><!-- end suggested div -->
</div><!-- end panel -->

Then I tried putting the suggested div around the panel, with both the panel and the accordion inside. This fixed it.

Code:

<div style="width: 100%; height: auto;"><!-- begin suggested div -->
  <div class="easyui-panel" title="My Panel Title"><!-- begin panel -->
    <div class="easyui-accordion accordian-menu"><!-- begin accordion -->
      <div title="Accordion Item One" selected="true">
        <div style="width: 100%;">This is text in a div.</div>
      </div>
      <div title="Accordion Item Two">
        <table width="100%">
          <tr>
            <td>This is text in a table.</td>
          </tr>
        </table>
      </div>
    </div><!-- end accordion -->
  </div><!-- end panel -->
</div><!-- end suggested div -->

However, I get issues when there is other content in the panels besides the accordion. Having content below the accordion inside the panel is fine, but when there is content inside the panel above the accordion, the widths get squashed.


It's important in some cases to be able to have content above the accordion. Is there some way to make it behave properly with content above it?

Thank you SO MUCH for your help!


* Please excuse the redacted images. I'm working with secure content.

[tslatt]

I'm still looking for a solution to having content above the accordions, without it messing up the accordion widths.