CODEWITHSUNDEEP
androidmobileaccordionslidetoggle
pork-chop
pork-chop

Reputation: 83

Misformatted contents in accordion panel - Android

I am using a simple jQuery/CSS accordion panel for a mobile website (coded as a flexible design with a few media queries thrown in). It's behaving as expected in most of the browsers I've been able to test, but there is a bug within the accordion in the default browser on my Android device (Galaxy Nexus, Android 4.2.2). When I open a panel, all of the contents jump into a weird formatting layout, but if I click on another panel or close the open panel, all of the contents jump into the layout I expected them to have.

The script:

$('.accordion > .heading > a, .accordion > .heading').on('click', function () {
    var $next = ($(this).is('a') ? $(this).parent().next() : $(this).next());
    $next.slideToggle();
    return false;
});

The CSS:

.accordion {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.accordion .slidepanel {
    background: #f6f6f6;
    display: none;
    margin: 0;
    padding: 3%;
    position: relative;
}

I have tried setting the panels to be open by default and all of the formatting within is as expected. I have racked my brain trying to figure out a fix for Android -- anyone out there got some other ideas?

Upvotes: 1

Views: 208

Answers (1)

pork-chop
pork-chop

Reputation: 83

Simple answer found after hours of this headache:

.accordion .slidepanel {
    background: #f6f6f6;
    display: none;
    overflow: hidden;   <<---
    margin: 0;
    padding: 3%;
    position: relative;
}

Something to do with the height and width that the .slideToggle(); needs to calculate while it's doing its magic...

Upvotes: 1

Related Questions