One Toggle Open At A Time – Accordion

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
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #10007030
    apilavakis
    Participant

    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 }’>


    #10007038
    Support
    Keymaster

    Hello, 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


    #10007233
    apilavakis
    Participant

    I think this is what you are referring to…

    /*
    Name: theme.css
    Written by: Okler Themes – (http://www.okler.net)
    Version: 3.7.0
    */


    #10007234
    apilavakis
    Participant

    Copied 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.


    #10007243
    Support
    Keymaster

    Hello, it’s great that you figured it out, please let me know if you have any other questions.

    Kind Regards, Jonas


Viewing 5 posts - 1 through 5 (of 5 total)

This topic is marked as "RESOLVED" and can not rceive new replies.