Member Avatar for freiheit

Does anyone know?
I dont have experience in jquery , and as far i know by default all panels inherit the height of the 1st panel ,depending of the quantity of the content inside it.

In the content of each panel will be dynamic content, of different size thats why im intrested in this.
Thanks :)

Edited by freiheit because: n/a
  • 2 Contributors
  • 2 Replies
  • 136 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by freiheit

Dani AI

Generated

Short answer for the two issues raised by : use the widget option that sizes panels to their own content, and stop using real heading tags for the accordion toggles so your document headings remain in logical order.

Example HTML using non-heading toggles (keep your real h1/h2 inside each panel):

<div id="accordion">
  <div class="acc-section">
    <button class="acc-toggle" aria-controls="panel1" aria-expanded="false">Summary</button>
    <div id="panel1" class="acc-panel">
      <h1>Article title</h1>
      <p>Panel content of arbitrary height.</p>
    </div>
  </div>
  <!-- repeat sections -->
</div>

Initialize the accordion so each panel fits its own content and the header selector matches your toggle element:

$("#accordion").accordion({
  header: ".acc-toggle",
  heightStyle: "content",
  animate: 180
});

Accessibility and behavior notes: if you replace default headings with custom elements, keep them keyboard-focusable (use <button> or add tabindex) and keep aria-controls / aria-expanded in sync. If you use the widget’s events, update attributes on activate so screen readers see the change:

$("#accordion").accordion({
  header: ".acc-toggle",
  heightStyle: "content",
  activate: function(event, ui) {
    ui.newHeader.find(".acc-toggle").attr("aria-expanded", "true");
    ui.oldHeader.find(".acc-toggle").attr("aria-expanded", "false");
  }
});

Troubleshooting: if panels still match height, check CSS on the accordion or parent containers (fixed heights, min-height, or overflow settings). If using an older jQuery UI version, upgrade or look for the equivalent height option. For reference and patterns, see the jQuery UI accordion docs (jQuery UI Accordion API), the WAI-ARIA accordion guidance (WAI-ARIA APG accordion), and MDN on heading elements (Heading elements).

Recommended Answers

All 2 Replies

Member Avatar for Stefano Mtangoo

Hi,
clearStyle: true and fillSpace:true is all you need

$("#accordion").accordion({
            header: "h3",
            clearStyle: true,
            fillSpace:true
        });
Member Avatar for freiheit

Hi,
clearStyle: true and fillSpace:true is all you need

$("#accordion").accordion({
            header: "h3",
            clearStyle: true,
            fillSpace:true
        });

Thats great thank you :)

I m having an other problem though..:(
Not important for readers but important for search engines....

My page structure is like this

1)header
2)topnavigation
3)rightcolumn
4)leftcolumn
5)content
5)footer

I have placed the jquery accordion to the left column. Now the thing is that the left column is above the content in the page html code, and the h3 tag is above the h1,h2 which are within the content , which is not good for search engines..

I would like the accordior not to have any h tag so in the content div to smoothly to place my header tags with logical order h1,h2,h3.

I used <strong></strong> tag to 'simulate' the h3 but the intire accordion wasnt functioning normally.

Do you know any way to bypass this issue?
Are accordions working specifically with h3 tags?

Thanks once again :)

Edited by freiheit because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.