Home Forums Porto Template Nesting Tabs

This topic contains 5 replies, has 2 voices, and was last updated by  Support2 4 months ago. This post has been viewed 169 times

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #10026076

    AndeeR
    Participant

    I’m using the “shortcodes-tabs.html” to add tabs to my page. But I am having trouble with nesting. I would like an additional menu of tabs on some of the main tabs. Could you provide instructions?


    #10026082

    Support2
    Keymaster

    Hello :),

    Here is the code you need:

    <div class="tabs">
    	<ul class="nav nav-tabs tabs-primary justify-content-end">
    		<li class="nav-item active">
    			<a class="nav-link" href="#popular7" data-toggle="tab"><i class="fas fa-star"></i> Popular</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link" href="#recent7" data-toggle="tab">Recent</a>
    		</li>
    	</ul>
    	<div class="tab-content">
    		<div id="popular7" class="tab-pane active">
    			<p>Popular</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
    
    			<div class="tabs">
    				<ul class="nav nav-tabs tabs-primary justify-content-end">
    					<li class="nav-item active">
    						<a class="nav-link" href="#test123" data-toggle="tab"><i class="fas fa-star"></i> Popular</a>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link" href="#test1234" data-toggle="tab">Recent</a>
    					</li>
    				</ul>
    				<div class="tab-content">
    					<div id="test123" class="tab-pane active">
    						<p>Popular</p>
    						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
    					</div>
    					<div id="test1234" class="tab-pane">
    						<p>Recent</p>
    						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
    					</div>
    				</div>
    			</div>
    
    		</div>
    		<div id="recent7" class="tab-pane">
    			<p>Recent</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
    		</div>
    	</div>
    </div>

    * The most important thing is don’t repeat/duplicate id="".

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10026084

    AndeeR
    Participant

    It looks like I had everything correct, but it is still not working for me. Below is the URL for a page with my Tabs content only – just so you can see the code. There are 5 top-layer tabs, with a 2nd layer of tabs on two of those. The problem is that everything loads up initially, and clicking on tabs just piles it up.

    What I really really wanted was have accordions inside some of tabs’ content. For example, the 5 Saturday field trips being in one accordion. But that failed. So I took those out thinking that was the problem.

    I am very grateful for your help, Andee


    #10026088

    Support2
    Keymaster
    This reply has been marked as private.
    #10026089

    AndeeR
    Participant

    Sorry about that. It is complete now.


    #10026091

    Support2
    Keymaster

    Hello, thank you 🙂

    There are missing close two <strong> elements that are causing this issue.

    Change all code of tabs to:
    https://pastebin.com/raw/jZKdaicV

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


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