jQuery каждый () не работает с click () внутри

Question

Я создал простой триптих. Проблема, с которой я столкнулся, заключается в том, что при нажатии на первую вкладку триптиха вы видите содержимое этой вкладки и содержимое других первых вкладок. Извините за включение всего кода JS, но мне пришлось сделать так, чтобы он работал на фрагменте. Вопрос внутри $(this).find('.tab').click(function ()});. Спасибо!

$(document).ready(function () {
	$(".triptych").each(function () { 
		$(this).find('.field--name-field-topic-1-icon, .field--name-field-topic-1-title').wrapAll('<div class="iconContainer iconContainer1"> </div>');
		$(this).find('.field--name-field-topic-2-icon, .field--name-field-topic-2-title').wrapAll('<div class="iconContainer iconContainer2"></div>');
		$(this).find('.field--name-field-topic-3-icon, .field--name-field-topic-3-title').wrapAll('<div class="iconContainer iconContainer3"></div>');
	
		$(this).find('.iconContainer').wrapAll('<div class="iconsContainer"> </div>');
	
		$(this).find('.iconContainer1').wrap('<a role="button" class="topic1-filter tab" data-tabid="topic1"></a>');
		$(this).find('.iconContainer2').wrap('<a role="button" class="topic2-filter tab" data-tabid="topic2"></a>');
		$(this).find('.iconContainer3').wrap('<a role="button" class="topic3-filter tab" data-tabid="topic3"></a>');
	
		$(this).find('.field--name-field-topic-1-content, .field--name-field-topic-2-content, .field--name-field-topic-3-content').wrapAll('<div class="tripctychContent-container"></div>');
		$(this).find('.field--name-field-topic-1-content, .field--name-field-topic-2-content, .field--name-field-topic-3-content').addClass('hideText');
	
		$(this).find('.field--name-field-topic-1-content').attr("data-blockid", "topic1");
		$(this).find('.field--name-field-topic-2-content').attr("data-blockid", "topic2");
		$(this).find('.field--name-field-topic-3-content').attr("data-blockid", "topic3");
	
		$(this).find('.field--name-field-topic-1-content').append('<span class="triangle triangle1"></span>');
		$(this).find('.field--name-field-topic-2-content').append('<span class="triangle triangle2"></span>');
		$(this).find('.field--name-field-topic-3-content').append('<span class="triangle triangle3"></span>');
	});

	$('.triptych .iconContainer .field--type-text-long').append('<p class="iconContainerMore">More</p>');

	$(".triptych").each(function () { 
		$(this).find('.tab').click(function () {
		
			var tabID = $(this).data('tabid');
			var isCurrent = !$(this).hasClass('current');
			
			$('.tab').removeClass('current');
			$(this).toggleClass('current', isCurrent);
	
			$('.iconContainerMore').removeClass('hideMoreText');
			$('.iconContainerMore', this).toggleClass('hideMoreText', isCurrent);
	
			$('.tripctychContent-container>div').removeClass('showTopicContent');
			$('.tripctychContent-container').find("[data-blockid=" + tabID + "]").toggleClass('showTopicContent', isCurrent);
		});
	 });

  });

 .field--name-field-topic-2-content,.field--name-field-topic-3-content,.field--name-field-topic-1-content {
     display: none;
 }

 .showTopicContent {
    display: block;
}

.hideMoreText {
    display: none;
}

.iconsContainer {display: flex;justify-content: space-between;}
p{text-align: center;}
.iconsContainer a {flex: 1; margin-right: 5px;}
.triptych img { width:50px;margin: 0 auto;display: block;height:50px;}
.field--name-field-topic-1-content, .field--name-field-topic-2-content,.field--name-field-topic-3-content{background:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="triptych">
        <div class="inner">
            <div class="field--name-field-topic-1-icon"><img src="https://fakeimg.pl/300/" ></div>
            <div class="field--name-field-topic-1-title field--type-text-long"><p>Topic 1 title</p></div>
            <div class="field--name-field-topic-2-icon"><img src="https://fakeimg.pl/300/" ></div>
            <div class="field--name-field-topic-2-title field--type-text-long"><p>Topic 2 title</p></div>
            <div class="field--name-field-topic-3-icon"> <img src="https://fakeimg.pl/300/" ></div>
            <div class="field--name-field-topic-3-title field--type-text-long"><p>Topic 3 title</p></div>
            <div class="field--name-field-topic-1-content"><p>Topic 1 content...</p></div>
            <div class="field--name-field-topic-2-content"><p>Topic 2 content...</p></div>
            <div class="field--name-field-topic-3-content"><p>Topic 3 content...</p></div>
        </div>
    </div>
    <div class="triptych">
        <div class="inner">
            <div class="field--name-field-topic-1-icon"><img src="https://fakeimg.pl/300/" ></div>
            <div class="field--name-field-topic-1-title field--type-text-long"><p>Triptick 2 Topic 1 title</p></div>
            <div class="field--name-field-topic-2-icon"><img src="https://fakeimg.pl/300/" ></div>
            <div class="field--name-field-topic-2-title field--type-text-long"><p>Triptick 2 Topic 2 title</p></div>
            <div class="field--name-field-topic-3-icon"> <img src="https://fakeimg.pl/300/" ></div>
            <div class="field--name-field-topic-3-title field--type-text-long"><p>Triptick 2 Topic 3 title</p></div>
            <div class="field--name-field-topic-1-content"><p>Triptick 2 Topic 1 content...</p></div>
            <div class="field--name-field-topic-2-content"><p> Triptick 2Topic 2 content...</p></div>
            <div class="field--name-field-topic-3-content"><p>Triptick 2 Topic 3 content...</p></div>
        </div>
    </div>

Answer 1

Не уверен, но вы хотите что-то вроде этого?:

$(document).ready(function () {
	$(".triptych").each(function () { 
		$(this).find('.field--name-field-topic-1-icon, .field--name-field-topic-1-title').wrapAll('<div class="iconContainer iconContainer1"> </div>');
		$(this).find('.field--name-field-topic-2-icon, .field--name-field-topic-2-title').wrapAll('<div class="iconContainer iconContainer2"></div>');
		$(this).find('.field--name-field-topic-3-icon, .field--name-field-topic-3-title').wrapAll('<div class="iconContainer iconContainer3"></div>');
	
		$(this).find('.iconContainer').wrapAll('<div class="iconsContainer"> </div>');
	
		$(this).find('.iconContainer1').wrap('<a role="button" class="topic1-filter tab" data-tabid="topic1"></a>');
		$(this).find('.iconContainer2').wrap('<a role="button" class="topic2-filter tab" data-tabid="topic2"></a>');
		$(this).find('.iconContainer3').wrap('<a role="button" class="topic3-filter tab" data-tabid="topic3"></a>');
	
		$(this).find('.field--name-field-topic-1-content, .field--name-field-topic-2-content, .field--name-field-topic-3-content').wrapAll('<div class="tripctychContent-container"></div>');
		$(this).find('.field--name-field-topic-1-content, .field--name-field-topic-2-content, .field--name-field-topic-3-content').addClass('hideText');
	
		$(this).find('.field--name-field-topic-1-content').attr("data-blockid", "topic1");
		$(this).find('.field--name-field-topic-2-content').attr("data-blockid", "topic2");
		$(this).find('.field--name-field-topic-3-content').attr("data-blockid", "topic3");
	
		$(this).find('.field--name-field-topic-1-content').append('<span class="triangle triangle1"></span>');
		$(this).find('.field--name-field-topic-2-content').append('<span class="triangle triangle2"></span>');
		$(this).find('.field--name-field-topic-3-content').append('<span class="triangle triangle3"></span>');
	});

	$('.triptych .iconContainer .field--type-text-long').append('<p class="iconContainerMore">More</p>');

	$(".triptych").each(function () { 
		$(this).find('.tab').click(function () {
		
			var tabID = $(this).data('tabid');
			var isCurrent = !$(this).hasClass('current');
			
			$('.tab').removeClass('current');
			$(this).toggleClass('current', isCurrent);
	
			$(this).parent().parent().find('.iconContainerMore').removeClass('hideMoreText');
			$('.iconContainerMore', this).toggleClass('hideMoreText', isCurrent);
	
			$(this).parent().parent().find('.tripctychContent-container>div').removeClass('showTopicContent');
			$(this).parent().parent().find("[data-blockid='" + tabID + "']").toggleClass('showTopicContent', isCurrent); // changes
		});
	 });

  });

 .field--name-field-topic-2-content,.field--name-field-topic-3-content,.field--name-field-topic-1-content {
     display: none;
 }

 .showTopicContent {
    display: block;
}

.hideMoreText {
    display: none;
}

.iconsContainer {display: flex;justify-content: space-between;}
p{text-align: center;}
.iconsContainer a {flex: 1; margin-right: 5px;}
.triptych img { width:50px;margin: 0 auto;display: block;height:50px;}
.field--name-field-topic-1-content, .field--name-field-topic-2-content,.field--name-field-topic-3-content{background:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="triptych">
        <div class="inner">
            <div class="field--name-field-topic-1-icon"><img src="https://fakeimg.pl/300/" ></div>
            <div class="field--name-field-topic-1-title field--type-text-long"><p>Topic 1 title</p></div>
            <div class="field--name-field-topic-2-icon"><img src="https://fakeimg.pl/300/" ></div>
            <div class="field--name-field-topic-2-title field--type-text-long"><p>Topic 2 title</p></div>
            <div class="field--name-field-topic-3-icon"> <img src="https://fakeimg.pl/300/" ></div>
            <div class="field--name-field-topic-3-title field--type-text-long"><p>Topic 3 title</p></div>
            <div class="field--name-field-topic-1-content"><p>Topic 1 content...</p></div>
            <div class="field--name-field-topic-2-content"><p>Topic 2 content...</p></div>
            <div class="field--name-field-topic-3-content"><p>Topic 3 content...</p></div>
        </div>
    </div>
    <div class="triptych">
        <div class="inner">
            <div class="field--name-field-topic-1-icon"><img src="https://fakeimg.pl/300/" ></div>
            <div class="field--name-field-topic-1-title field--type-text-long"><p>Triptick 2 Topic 1 title</p></div>
            <div class="field--name-field-topic-2-icon"><img src="https://fakeimg.pl/300/" ></div>
            <div class="field--name-field-topic-2-title field--type-text-long"><p>Triptick 2 Topic 2 title</p></div>
            <div class="field--name-field-topic-3-icon"> <img src="https://fakeimg.pl/300/" ></div>
            <div class="field--name-field-topic-3-title field--type-text-long"><p>Triptick 2 Topic 3 title</p></div>
            <div class="field--name-field-topic-1-content"><p>Triptick 2 Topic 1 content...</p></div>
            <div class="field--name-field-topic-2-content"><p> Triptick 2Topic 2 content...</p></div>
            <div class="field--name-field-topic-3-content"><p>Triptick 2 Topic 3 content...</p></div>
        </div>
    </div>