javascript - Bootstrap Tabs nested inside wordpress loop won't toggle -
i stuck. can't find answer anywhere. have tabs generated wordpress loop. each title title of post. when click on tab have sub-tabs titles "overview", "floorplan" , "spec".
these work on first post type tab, if click on post tab , click on floorplan tab, not change within tab, when go first tab opened on load find has changed floorplan tab. (i hope makes sense)
tl:dr nested tabs change first tab, none of others.
here code.
<ul class="nav nav-tabs" id="siteplan"> <h3>site plan key</h3> <ul class="key-layout list-unstyled"> <li class="key-house lantana"><a href="#lantana" role="tab" data-toggle="tab">lantana</a></li> <li class="key-house lavender"><a href="#lavender" role="tab" data-toggle="tab">lavender</a></li> <li class="key-house oleander"><a href="#oleander" role="tab" data-toggle="tab">oleander</a></li> <li class="key-house fern"><a href="#fern" role="tab" data-toggle="tab">fern</a></li> <li class="key-house jacaranda"><a href="#jacaranda" role="tab" data-toggle="tab">jacaranda</a></li> <li class="key-house holly"><a href="#holly" role="tab" data-toggle="tab">holly</a></li> <li class="key-house maple"><a href="#maple" role="tab" data-toggle="tab">maple</a></li> <li class="key-house hazel"><a href="#hazel" role="tab" data-toggle="tab">hazel</a></li> <li class="key-house hydrangea"><a href="#hydrangea" role="tab" data-toggle="tab">hydrangea</a></li> <li class="key-house camellia"><a href="#camellia" role="tab" data-toggle="tab">camellia</a></li> <li class="key-house mulberry"><a href="#mullberry" role="tab" data-toggle="tab">mulberry</a></li> <li class="key-house juniper"><a href="#juniper" role="tab" data-toggle="tab">juniper</a></li> </ul> </div> </div> <!-- row --> <div class="row"> <?php $property = (object)get_post_meta( get_the_id(), "sc_house_type_details", true); ?> <!-- tab panes --> <!-- development overview --> <div id="development-overview"> <!-- wrapper --> <div class="container-fluid"> <!-- row --> <div class="row"> <!-- tab content --> <div class="tab-content" id="outer"> <!-- outer tabs --> <?php $counter = 0; $loop = new wp_query( array( 'post_type' => 'house_type', 'posts_per_page' => -1 ) ); while ( $loop->have_posts() ) : $loop->the_post(); $counter++; ?> <div class="tab-pane <?=($counter == 1) ? 'active': ''?>" id="<?php print strtolower(get_the_title()); ?>"> <div id="spec-tabs" class="white clearfix"> <!-- inner tabs --> <ul class="nav nav-tabs dark-grey" role="tablist" id="inner"> <li role="presentation" class="active"><a href="#general" aria-controls="general" role="tab" data-toggle="tab">overview</a></li> <li role="presentation"><a href="#floorplan" aria-controls="floorplan" role="tab" data-toggle="tab">floor plans</a></li> <li role="presentation"><a href="#specs" aria-controls="specs" role="tab" data-toggle="tab">specification</a></li> </ul> <!-- inner tab panes --> <div class="tab-content clearfix" id="inner-tabs"> <div role="tabpanel" class="tab-pane fade in active clearfix" id="general"> <div class="col-sm-12 spec-info"> <?php $property = (object)get_post_meta( get_the_id(), "sc_house_type_details", true); ?> <h2 id="overview"><?php the_title(); ?></h2> <p class="green-text"><?php echo ' '. $property->beds; ?></p> </div> <?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->id), true, '' ); ?> <div class="col-sm-5"> <div class="property-image" style="background: url(<?php echo $src[0]; ?> ) !important;"><?php the_post_thumbnail('spec'); ?></div> </div> <div class="col-sm-7"> <p><?php the_content(); ?></p> <div class="availability-list"> <h3>availability</h3> <ul class="availability-key list-inline"> <li><span class="key-square avail"></span> available</li> <li><span class="key-square sold"></span> sold</li> <li><span class="key-square no-rel"></span> not released</li> <li><span class="key-square reserved"></span> reserved</li> </ul> <ul class="availability list-inline"> <?php $plots = get_post_meta( $post->id, 'plots', true ); foreach( $plots $plotstatus ) { if( $plotstatus['development'] == $title){ if( $plotstatus['plotno'] == 'available'){ echo '<li title="plot available" class="avail">'. $plotstatus['title'] .'</li>'; } if( $plotstatus['plotno'] == 'sold'){ echo '<li title="plot sold" class="sold">'. $plotstatus['title'] .'</li>'; } if( $plotstatus['plotno'] == 'not released'){ echo '<li title="plot not released" class="no-rel">'. $plotstatus['title'] .'</li>'; } if( $plotstatus['plotno'] == 'reserved'){ echo '<li title="plot reserved" class="reserved">'. $plotstatus['title'] .'</li>'; } } }?> </ul> </div> </div> </div> <div role="tabpanel" class="tab-pane fade in clearfix" id="floorplan"> <h2>floor plans</h2> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. fusce sed elit eu sem tincidunt condimentum.</p> <?php $page_id = is_home() ? 10 : get_the_id(); if( !$floorplan_image = get_page_images($page_id, 'sc_floorplan_image') ){ } else { $floorplan_image = $floorplan_image[0]; } ?> <img src="<?php echo $floorplan_image[0];?>"> </div> <div role="tabpanel" class="tab-pane fade in clearfix" id="specs"> <?php $general_spec = get_post_meta(get_the_id(), '_ht_specification', false ); ?> <?php echo $general_spec[0]; ?> </div> </div> </div> </div> <?php endwhile; ?>
using title unique reference tab names solves problem.
i.e. tab title:
<a href="#floorplan-<?php print strtolower(get_the_title()); ?> relates tab id:
<div role="tabpanel" class="tab-pane fade in clearfix" id="floorplan-<?php print strtolower(get_the_title()); ?>"> 
Comments
Post a Comment