Home › Forums › Porto – Responsive HTML5 Template › One Toggle Open At A Time – Accordion
- This topic has 4 replies, 2 voices, and was last updated 9 years ago by Support. This post has been viewed 1230 times
-
AuthorPosts
-
February 24, 2015 at 6:00 pm #10007030apilavakisParticipant
i used the following code to create an accordion that only one toggle at a time but it does not work. It behaves like your other sample accordion in your shortcodes page.
<div class=”toogle” data-plugin-toggle data-plugin-options='{ “isAccordion”: true }’>
February 24, 2015 at 10:56 pm #10007038SupportKeymasterHello, yes, that’s the HTML to use the accordion:
<div class="toggle" data-plugin-toggle data-plugin-options='{ "isAccordion": true }'> <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. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. 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. </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> <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>
It must work, but depends on which Porto version you’re using, can you confirm?
Kind Regards,
Jonas
March 4, 2015 at 5:24 pm #10007233apilavakisParticipantI think this is what you are referring to…
/*
Name: theme.css
Written by: Okler Themes – (http://www.okler.net)
Version: 3.7.0
*/
March 4, 2015 at 5:35 pm #10007234apilavakisParticipantCopied again your example which was identical to mine (except the content) and yours worked and mine didn’t. I must be missing a detail or something. Anyway i ended up doing it again from the beginning and it seems that it works. Thanks for the support.
March 5, 2015 at 9:51 am #10007243SupportKeymasterHello, it’s great that you figured it out, please let me know if you have any other questions.
Kind Regards, Jonas
-
AuthorPosts
This topic is marked as "RESOLVED" and can not rceive new replies.