Проблема с табами на JQ?

Question

[sergeymaverick]

<div class="iStepsR">
            <h2>Заголовок</h2>
            <div class="iStepsTab">
                <div class="iStepsTabTitle active">
                    <span>Set Things Up</span>
                </div>
                <div class="iStepsTabText active">
                    <p>Lorem text</p>
                </div>
            </div>
             <div class="iStepsTab">
                <div class="iStepsTabTitle">
                    <span>Screen Applicants</span>
                </div>
                <div class="iStepsTabText">
                   <p>Lorem text</p>
                </div>
            </div>
             <div class="iStepsTab">
                <div class="iStepsTabTitle">
                    <span>Plan A Move In</span>
                </div>
                <div class="iStepsTabText">
                    <p>Lorem text</p>
                </div>
            </div>
             <div class="iStepsTab">
                <div class="iStepsTabTitle">
                    <span>Welcome Your Tenant</span>
                </div>
                <div class="iStepsTabText">
                    <p>Lorem text</p>
                </div>
            </div>
             <div class="iStepsTab">
                <div class="iStepsTabTitle">
                    <span>Manage Your Properties</span>
                </div>
                <div class="iStepsTabText">
                    <p>Lorem text</p>
                </div>
            </div>
        </div>

<script>
    $(document).ready(function () {
        $(".iStepsR").on("click", ".iStepsTabTitle", function() {
            $(".iStepsR").find(".active").removeClass("active");
            
            $(this).addClass("active");
            $(".iStepsTabText").eq($(this).index()).addClass("active");
        });
    });
</script>

Есть код. Помогите решить вопрос. По клику на класс "iStepsTabTitle" к нему присваиваться класс active, а вот к классу iStepsTabText не хочет. Как сделать что бы к классу iStepsTabText тоже присваивался класс "active". (логика работы по типу табов)

Answer 1

[Stalker_RED]

$('.iStepsR').on('click', '.iStepsTabTitle', function(){
  let $tab = $(this).closest('.iStepsTab')
  $tab.toggleClass('active')
    .siblings().removeClass('active')
})

Меняйте класс всему табу и не мучайтесь.

Comments

[sergeymaverick]

Проблема в том, что при загрузке страницы, нужно что бы iStepsTabTitle был активный и iStepsTabText тоже, а у других был показан только iStepsTabTitle.

Set Things Up


Lorem text

<style>

iStepsTabText {
display: none;
}

.span {
color: black;
}

.active > span {
 color: red;
}

.iStepsTabTitle .active {
  display: block;
}

.iStepsTabText.active {
  display: block;
}
</style>

[Stalker_RED]

sergeymaverick, ну проставьте одному из табов класс active заранее. Или я не понимаю о чем речь.

[sergeymaverick]

Stalker_RED, уже все сделал) спасибо вам)