Question

I’ve got a jquery accordion on site BUT it kinda doesn’t work >> when browser loads page accordion looks good (with one first section opened) BUT when I press on some other section, first section closes and none of sections ar opening up, so it kinda stucks with all sections closed! When I reload the page this loop starts from the beginning. Here is the link to the site, click on “Pakalpojumi” to see that accordion.
Here is the html of accordion:

<div id="accord">

                <h3><a id="gr" href="#">Griezšana</a></h3>
                <div> 
                    <p>
                    max griešanas garums: 2500mm </br>max loksnes biezums: 4mm
                    </p>
                </div>
                <h3><a id="ur" href="#">Urbšana</a></h3>
                <div> 
                    <p>
                    Mēs piedāvājam 3 dažādu veidu stacionārie urbji
                    </p>
                </div>
                <h3><a id="lo" href="#">Locīšna</a></h3>
                <div> 
                    <p>
                    max loksens garums: 2000mm, </br>max spiešanas spēks: 65 t 
                    </p>
                </div></div>

Adding accordion to accord:

$('#accord').accordion();

Does anyone have any idea of what could be wrong?

Answer 1

The code works fine by itself, see here. On closer inspection of your site, there is a style which is placed on the active div each time the header is clicked (I’m using chrome, it appears as element.style in its css properties) which sets the height, padding-top and padding-bottom to 0px. If I disable those styles, the selected div appears fine. Do you happen to be adding these styles on every click?

Edit
Ok, I found your problem… Does the second tab here look familiar? According to this post it’s because when you initialise your accordion, its parent element is hidden (via your ‘off’ class). So you can get around this issue by defining a height for your divs after initialising your accordian like so:

$('#accordion').accordion();
$('#accordion >div').css('height', '300');

… or by by initialising your accordion once its parent is shown.