Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
The Foundation accordion doesn't work as expected ... !?
On this page I’m using Foundation’s accordion. As you can see the panels are being opened and closed beautifully but in some cases the accordion loses it’s focus onto the ‘header’ (dd). I guess it’s because panels are opened and closed at the same time. The scrolling position can’t be calculated correctly I presume.
I’m not familiar with Javascript, but I think there has to be a (simple) script that makes the accordion work as expected. Maybe only by stopping to close an already opened panel.
Is there someone willing to help me with this non Textpattern problem?
Last edited by RedFox (2015-10-13 07:32:58)
Offline
Re: The Foundation accordion doesn't work as expected ... !?
It is solved by using scrollIt.js
The accordion without scrollIt.js:
<dl class="accordion" data-accordion="fokor">
<dd class="accordion-navigation">
<a href="#panel1">Bestuur van FOKOR</a>
<div id="panel1" class="content">
<txp:article_custom id="25" form="article_single-notitle" />
</div>
</dd>
<dd class="accordion-navigation">
<a href="#panel2">Ledenvergadering FOKOR</a>
<div id="panel2" class="content">
<txp:article_custom id="26" form="article_single-notitle" />
</div>
</dd>
</dl>The accordion with scrollIt.js:
<dl class="accordion" data-accordion="fokor" data-scroll-index="1">
<dd class="accordion-navigation">
<a href="#panel1" data-scroll-goto="1">Bestuur van FOKOR</a>
<div id="panel1" class="content">
<txp:article_custom id="25" form="article_single-notitle" />
</div>
</dd>
<dd class="accordion-navigation">
<a href="#panel2" data-scroll-goto="1">Ledenvergadering FOKOR</a>
<div id="panel2" class="content">
<txp:article_custom id="26" form="article_single-notitle" />
</div>
</dd>
</dl>The accordions are working as expected … :)
Last edited by RedFox (2015-10-13 15:20:48)
Offline