Bug? Help needed with Accordion


#1

Dear All,

I am new to Framework 7 so pardon my new bee level of questioning :wink:

I Am trying to do a real simple thing… making the accordion work in my app. I am using the ios theme.
I just copied and past the “custom accordion” example from the website to my page:

            <!-- Scrollable page content -->
            <div class="page-content ptr-content" data-ptr-distance="55">
                <!-- Default pull to refresh preloader-->
                <div class="ptr-preloader">
                    <div class="preloader color-pink"></div>
                    <div class="ptr-arrow"></div>
                </div>

                <div class="block block-strong inset">
                    <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet
                        sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit
                        amet quam mollis, vulputate turpis vel, sagittis felis.</p>
                </div>
                <!-- Custom Accordion -->
                <div class="block-title">Custom Accordion</div>
                <div class="block accordion-list custom-accordion">
                    <div class="accordion-item">
                        <div class="accordion-item-toggle">
                            <i class="icon icon-plus">+</i> <i class="icon icon-minus">-</i>
                            <span>Item 1</span>
                        </div>
                        <div class="accordion-item-content">
                            <p>Item 1 content. Lorem ipsum dolor sit amet...</p>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <div class="accordion-item-toggle">
                            <i class="icon icon-plus">+</i> <i class="icon icon-minus">-</i>
                            <span>Item 2</span>
                        </div>
                        <div class="accordion-item-content">
                            <p>Item 2 content. Lorem ipsum dolor sit amet...</p>
                        </div>
                    </div>
                </div>
            </div>

The trouble is that when i click on one of the items it opens really quick and than is closes again… does anybody know what I am doing wrong or how I can solve this?

Thanks in advance for your help!

Kind Regards,

Peter


#2

Work fine, try delete last </div>, maybe it’s a bug…
https://jsfiddle.net/Silver775/xyo0n3L4/7/


#3

I had a similar issue.
When I was opening my F7 app in the browser as iPhone device, it quickly closed when I was clicking, but in PhoneGap mobile (live test) it behaved correctly,
I disable touch simulation mode and it started to work well on the browser.