Tabby Tabs behaving strangely

So I commented out the [tabby] shortcode without the title. It lumps the rectangle with the “BASE OF THE WATERFALL” tabby tab action together. But if I click any other tab, the BASE OF THE WATERFFALL content remains with other tab content immediately below it (instead of substituting for it), which is not desired.

So I guess the “unusual” dummy/tabby shortcode establishes that empty rectangle that I’m calling “Home” (even though it’s not titled that way) needs to be there to prevent the content overlap.

I took out the comments. It doesn’t appear the “unusual” dummy/tabby shortcode is related to the signature we’re seeing.

Hi,

So the developer told me that she removed the CSS stylings and the issue was still there.

Any other things you suggest we try out? Or is this worth a deeper dive?

Thanks,
Johnny

Hi,

So here’s the code that the developer passed on to me that she used to create the second tab system.

html-waterfall-tabs.php

<div id="waterfallTabs">
	<div class="tab">
	  <button class="tablinks" id="photos-button" onclick="openInfo(event, 'photos')">PHOTOS</button>
	  <button class="tablinks google-map-button" id="directions-button" onclick="openInfo(event, 'directions')">DIRECTIONS</button>
	  <button class="tablinks" id="videos-button" onclick="openInfo(event, 'video')">VIDEO</button>
	  <button class="tablinks" id="more-info-button" onclick="openInfo(event, 'more-info')">MORE INFO</button>
	</div>

	<div id="photos" class="tabcontent">
		<div><?php the_field('photo_journal'); ?></div>
	</div>

	<div id="directions" class="tabcontent google-map">
		<div><?php the_field('google_maps_iframe_code'); ?></div>
		<div><?php the_field('driving_directions'); ?></div>
	</div>

	<div id="video" class="tabcontent">
		<div><?php the_field('video'); ?></div>
	</div>

	<div id="more-info" class="tabcontent">
		<div id="related-trip-reports">
			<h3>Related Trip Reports</h3>
			<?php the_field('related_trip_reports'); ?>
		</div>
		<div id="top-10-lists">
			<h3>Related Top 10 Lists</h3>
			<?php the_field('related_top_10_lists'); ?>
		</div>
		<div id="related-itineraries-posts">
			<h3>Related Itineraries</h3>
			<?php the_field('related_itinerary_posts'); ?>
		</div>

		<div id="trip-planning-resources">				
			<h3>Trip Planning Resources</h3>
			<?php the_field('related_featured_article_posts'); ?>
			<br/>
			<?php 
			
			the_field('trip_planning_resources',false,false);
			
			
			?>
		</div>
		<div id="pj-featured-photos-wrapper"></div>
		<h3>Featured Images and Nearby Attractions</h3>
		<div id="pj-featured-photos"><?php the_field('photo_journal_featured_photos'); ?></div>
	</div>
</div>

js-waterfall-tabs.js

// Waterfall Tabs

function openInfo(evt, infoName) {
    var i, waterfalltabcontent, waterfallTablinks;
    waterfallTabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < waterfallTabcontent.length; i++) {
        waterfallTabcontent[i].style.display = "none";
    }
    waterfallTablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < waterfallTablinks.length; i++) {
        waterfallTablinks[i].className = waterfallTablinks[i].className.replace(" active", "");
    }
    document.getElementById(infoName).style.display = "block";
    evt.currentTarget.className += " active";
}

// This is just to initialize each of the tab content

    function tabButtonClick(){
        image.each(function () {
            var that = $(this);
            if (that.width() < that.height()) {
                that.removeClass('landscape');
                that.removeClass('square');
                that.addClass('portrait');
            } else if (that.width() > that.height()) {
                that.removeClass('portrait');
                that.removeClass('square');
                that.addClass('landscape');
            } else {
                that.removeClass('portrait');
                that.removeClass('landscape');
                that.addClass('square');
            }
        });
    }

    $('#more-info-button').click(function() { tabButtonClick(); });
    $('#directions-button').click(function() { tabButtonClick(); });
    $('#videos-button').click(function() { tabButtonClick(); });

Hi,

Just wanted to let you know that the developer renamed her target for the tab that she employed, and the Tabby Tabs behavior is pretty much as expected now.

Thank you for steering us in this direction in our troubleshooting efforts.