Tables in Toggle Boxes (Divs)

[xoomit]

Dear Okler-Team,

I put a table in a toggle box and it doesn’t toggle anymore. Please see the mentioned website as an example or see:

  <div class="row">
                            <div class="col-md-12">
                                <div class="toogle" data-plugin-toggle>
                                    <section class="toggle">
                                        <label>Wo kommen die ganzen Preisdaten her?</label>
                                        <section class="panel">
                                            <div class="panel-body">
                                                <table class="table table table-striped table-condensed mb-none tablesorter">
                                                    <thead>
                                                        <tr>
                                                            <th>Domainendung</th>
                                                            <th class="text-right hidden-xs hidden-sm">Land</a></th>
                                                            <th class="text-right">Günstigster Preis <a rel="tooltip" data-original-title="Durchschnittlicher Preis pro Jahr berechnet für eine Laufzeit von 5 Jahren."><img src="/img/tooltip.png" width="20" height="20" border="0" alt="Tooltip"></a></th>
                                                            <th class="text-right hidden-xs">Anbieter</th>
                                                            <th class="text-right hidden-xs hidden-sm"></th>
                                                            <th class="text-right"></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td><strong>.de</strong></td>
                                                            <td class="text-right hidden-xs hidden-sm">Deutschland</a></td>
                                                            <th class="text-right">0,29€</td>
                                                            <td class="text-right hidden-xs">checkdomain</td>
                                                            <td class="text-right hidden-xs hidden-sm"><img alt="checkdomain Logo" width="100" src="/img/logos/checkdomain.png"></td>
                                                            <td class="text-right"><a href="www.checkdomain.de" class="btn btn-primary">Zum Anbieter</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong>.de</strong></td>
                                                            <td class="text-right hidden-xs hidden-sm">Deutschland</a></td>
                                                            <th class="text-right">0,29€</td>
                                                            <td class="text-right hidden-xs">checkdomain</td>
                                                            <td class="text-right hidden-xs hidden-sm"><img alt="checkdomain Logo" width="100" src="/img/logos/checkdomain.png"></td>
                                                            <td class="text-right"><a href="www.checkdomain.de" class="btn btn-primary">Zum Anbieter</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong>.de</strong></td>
                                                            <td class="text-right hidden-xs hidden-sm">Deutschland</a></td>
                                                            <th class="text-right">0,29€</td>
                                                            <td class="text-right hidden-xs">checkdomain</td>
                                                            <td class="text-right hidden-xs hidden-sm"><img alt="checkdomain Logo" width="100" src="/img/logos/checkdomain.png"></td>
                                                            <td class="text-right"><a href="www.checkdomain.de" class="btn btn-primary">Zum Anbieter</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong>.de</strong></td>
                                                            <td class="text-right hidden-xs hidden-sm">Deutschland</a></td>
                                                            <th class="text-right">0,29€</td>
                                                            <td class="text-right hidden-xs">checkdomain</td>
                                                            <td class="text-right hidden-xs hidden-sm"><img alt="checkdomain Logo" width="100" src="/img/logos/checkdomain.png"></td>
                                                            <td class="text-right"><a href="www.checkdomain.de" class="btn btn-primary">Zum Anbieter</a></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                    </section>
                                    <section class="toggle">
                                        <label>Wieviel kann man sparen?</label>
                                        <p>Das hängt natürlich von seinem individuellem Domain-Portfolio ab. Generell lässt sich aber häufig sehr viel Geld sparen. Will man sich zum Beispiel 2 .de-Domain für 5 Jahre registrieren beträgt der Preisunterschied zwischen dem teuersten Anbieter und dem günstigsten aktuell 68,60€ oder <strong>über 700%</strong> Hat man z.B. ein kleines, internationales Unternehmen und hält acht Domains (je eine .de, .fr, .it, .dk, .es, .pl, .at und .ch-Domain) für 10 Jahre <strong>spart man schon 5.098€</strong>. Bei dieser Domain-Zusammensetzung ist der teuerste Anbieter übrigens kein unbekannter Halsabschneider, sondern united-domains...</p>
                                    </section>

                                    <section class="toggle">
                                        <label>Mal ehrlich: Warum macht ihr das Ganze?</label>
                                        <p>Ursprünglich ist die Idee daraus entstanden, dass wir selber ein paar Domains bei verschiedenen Anbietern haben und diese zusammenlegen wollten. Nur welcher Registrar ist der günstigste? Um das herauszufinden, haben wir uns die Preisdaten aller Anbieter gezogen und dann gedacht wenn wir die Daten schon haben, bauen wir einfach einen Domain-Preisvergleich damit. Um ein wenig Geld damit zu verdienen sind wir bei allen Registraren, die das anbieten, Affiliate-Partner. Ob wir irgendwo eine Provision verdienen oder nicht beeinflusst aber nicht den Preisvergleich! Außerdem zeigen wir ein Werbebanner auf unserer Seite, was uns ein wenig Geld einbringen soll.</p>
                                    </section>
                                </div>
                            </div>
                        </div>

Is it generally not possible to put a table in a toggleable section? Or is there another way to do this?

Thanks & best,
Torge

---

[Support]

Hello, looking at the HTML the only problem I can see is the classes from the DIVs that you used, for the toggles, the correct structure is:

<div class="toogle" data-plugin-toggle>
	<section class="toggle active">
		<label>Curabitur eget leo at velit imperdiet vague iaculis vitaes?</label>
		<div class="toggle-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
		</div>
	</section>
	<section class="toggle active">
		<label>Curabitur eget leo at imperdiet vague iaculis vitaes?</label>
		<div class="toggle-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor.</p>
		</div>
	</section>
	<section class="toggle">
		<label>Curabitur eget leo at velit imperdiet vague iaculis vitaes?</label>
		<div class="toggle-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor, orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit, pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa. Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna, ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio, ac pulvinar felis quam sit.</p>
		</div>
	</section>
</div>

As you can see, each part of the content should be inside a “toggle-content” div.

Can you please try that and let me know if the problem persists?

Thanks.

---

[xoomit]

Hej Okler-Support,

thanks for the quick reply.
Works great now!

Thanks & best,
Torge

---

[Author]

Posts