Simple juery-ui accordion issue

HTML & CSS
1

Hello all, on this page:
http://agileart.us/arachnohazard/great-reads/
toward the footer i have implemented an accordion. Great. however when it opens the text overwrites the section below.
I tried adding a clear feature to it.
didn’t work. Advice on how to resolve this please?

2

For starters, you have each section in the accordian slider set at a fixed height of 530px. Try changing that to height: auto (or do you really need the height?)

3

Thx, Do not.
wonder if that is the jquery-ui thought. i don’t see it on my css,

4

Ok, so this works now. Thank you @WebMachine WebMachine for picking the right direction.

 //accordion
    $( "#accordion" ).accordion({
        header: "h3",
        active: false,
        collapsible: true,
        clearStyle: true,
        heightStyle: 'content'
    });
5

kinda on the same topic…once clicked i see that annoying blue outline around the h3, how do i get rid of it?
D

6

The dotted outline is an accessibility feature being applied by jQuery, ui-state-focus. It can be overriden with CSS or by removing that line from the JS. However, if the dotted line is defeated, one should supply another method of indicating the item that has focus.

7

ok thank you Ronpat. looking the ui documentation and wish it was just a little be more clear.
D

8

That wouldn’t have told you about the outline - the outline is part of standard browser functionality and always works except where someone overrides it.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.