boostrap 4 tabs not working

This thread is resolved. Here is a description of the problem and solution.

Problem:

Create bootstrap 4 tab section with Views plugin.

Solution:

There isn't such kind of built-in feature within Toolset Views plugin, it needs custom codes.

You will need to follow the Bootstap document to setup the tabs:

Relevant Documentation:

https://getbootstrap.com/docs/4.0/components/navs/#tabs

This support ticket is created 5 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

Tagged: Views, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by Tcoffee 5 years, 5 months ago.

Assisted by: Luo Yang.

Author

Posts

July 30, 2019 at 8:42 am #1303405

Tcoffee

I am trying to: create tab section with bootstrap 4

Link to a page where the issue can be seen: hidden link

I expected to see: hidden link

Instead, I got: tabs layout is coming out properly but only first tab content is showing.

Tab View:

[wpv-layout-start]
	[wpv-items-found]

       <ul class="nav nav-pills flex-column" id="myTab" role="tablist">
	<!-- wpv-loop-start -->
		<wpv-loop>
             [wpv-item index=1]
          <li class="nav-item">
    <a class="nav-link active" id="[wpv-post-id]" data-toggle="tab" href="#[wpv-post-id]" role="tab" aria-controls="surgery" aria-selected="true">
     <div class="tab-icon">   
    <img src="[types field='featured-icon' output='raw'][/types]"></div>    
    <span>[wpv-post-title]</span><span class="hover-icon mar-right-10"><i class="fas fa-angle-right"></i></span></a>
  </li>
           [wpv-item index=other]
          <li class="nav-item">
    <a class="nav-link" id="[wpv-post-id]" data-toggle="tab" href="#[wpv-post-id]" role="tab" aria-controls="surgery" aria-selected="true">
     <div class="tab-icon">   
    <img src="[types field='featured-icon' output='raw'][/types]"></div>    
    <span>[wpv-post-title]</span><span class="hover-icon mar-right-10"><i class="fas fa-angle-right"></i></span></a>
  </li>
		</wpv-loop>
       </ul>
    
  
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Tab Content View:

[wpv-layout-start]
	[wpv-items-found]

	<!-- wpv-loop-start -->
		<wpv-loop>
              [wpv-item index=1]
           <div class="tab-pane fade show active" id="[wpv-post-id]" role="tabpanel" aria-labelledby="[wpv-post-id]">
         <div class="tab-inner-box">
            <h3><span></span> [wpv-post-title]</h3>
            <img src="[wpv-post-featured-image size='full' output='url']" class="img-fluid" />
            [wpv-post-body view_template="None"]
         </div>
      </div>
          
            [wpv-item index=other]
          <div class="tab-pane fade" id="[wpv-post-id]" role="tabpanel" aria-labelledby="[wpv-post-id]">
         <div class="tab-inner-box">
            <h3><span></span> [wpv-post-title]</h3>
            <img src="[wpv-post-featured-image size='full' output='url']" class="img-fluid" />
            [wpv-post-body view_template="None"]
         </div>
      </div>
		</wpv-loop>
	<!-- wpv-loop-end -->
     
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Content template:

<div class="container" id="tab-menu"> 
  <div class="row">
     <div class="col-md-4">
[wpv-view name="services-tab"]
    </div>
    <div class="col-md-8 row">
   <div class="tab-content" id="myTabContent">
[wpv-view name="services-tab-content"]
     </div>
</div>
      </div>
</div>

please help

July 30, 2019 at 9:02 am #1303433

Luo Yang

Hello,

It needs custom codes, please provide a test site with the same problem, fill below private message box with login details, I need to test and debug it in a live website. thanks

July 30, 2019 at 9:54 am #1303509

Tcoffee

My issue is resolved now. Thank you!