Question 42613 in Html Question posted in
Some basic documentation can be found here.

Get corresponding element in second <div> – Html

I have this format.

<div class="container" style="display: flex;">
    <div style="width: 25%;">
        <div class="collapsible-title is-active">Title 1
            <i class="fas fa-solid fa-chevron-right"></i>
        </div>
        <div class="collapsible-title">Title 2
            <i class="fas fa-solid fa-chevron-right"></i>
        </div>
    </div>
    <div style="width: 75%;">
        <div class="collapsible-content is-active">
            <h3>Title 1 Content</h3>
            <p>
              Lorem Ipsum is simply dummy text.
            </p>
        </div>
        <div class="collapsible-content">
            <h3>Title 2 Content</h3>
            <p>
              Lorem Ipsum has been the industry's standard dummy text.
            </p>
        </div>
    </div>
</div>

Now when I click on "Title 2" on first div, I want to remove all "is-active" class, and put "is-active" class in "Title 2" form first div and div of "Title 2 content" in second div.

(function ($) {
  $(".collapsible-title").on("click", function () {
    $(this).addClass("is-active").siblings(".collapsible-title").removeClass("is-active");
    $(".collapsible-content").addClass("is-active").siblings(".collapsible-content").removeClass("is-active");
  });
});
Tags:

2

Answers


  1. 0

    If the order of the elements are the same then you can add .eq($(this).index()) to your code.

    $(".collapsible-title").on("click", function() {
  $(this).addClass("is-active").siblings(".collapsible-title").removeClass("is-active");
  $(".collapsible-content").eq($(this).index()).addClass("is-active").siblings(".collapsible-content").removeClass("is-active");
});

    This will add the class to the corresponding div to the clicked element.

    $(".collapsible-title").on("click", function() {
  $(this).addClass("is-active").siblings(".collapsible-title").removeClass("is-active");
  $(".collapsible-content").eq($(this).index()).addClass("is-active").siblings(".collapsible-content").removeClass("is-active");
});
    .collapsible-content {
  display: none;
}

.collapsible-content.is-active {
  display: block;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" style="display: flex;">
  <div style="width: 25%;">
    <div class="collapsible-title is-active">Title 1
      <i class="fas fa-solid fa-chevron-right"></i>
    </div>
    <div class="collapsible-title">Title 2
      <i class="fas fa-solid fa-chevron-right"></i>
    </div>
  </div>
  <div style="width: 75%;">
    <div class="collapsible-content is-active">
      <h3>Title 1 Content</h3>
      <p>
        Lorem Ipsum is simply dummy text.
      </p>
    </div>
    <div class="collapsible-content">
      <h3>Title 2 Content</h3>
      <p>
        Lorem Ipsum has been the industry's standard dummy text.
      </p>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Whichever div is clicked, its content is displayed. Are you looking for something like this?

    var title1Tab=document.getElementById('title1-tab');
var title2Tab=document.getElementById('title2-tab');
var title1Content=document.getElementById('title1-content');
var title2Content=document.getElementById('title2-content');

title1Tab.addEventListener('click',()=>{
  title1Content.classList.remove('non-active');
  title1Content.classList.add('is-active');
  title2Content.classList.remove('is-active');
  title2Content.classList.add('non-active');
})
title2Tab.addEventListener('click',()=>{
  title2Content.classList.remove('non-active');
  title2Content.classList.add('is-active');
  title1Content.classList.remove('is-active');
  title1Content.classList.add('non-active');
})
    .is-active{
  display:block;
}
.non-active{
  display:none;
}
    <div class="container" style="display: flex;">
    <div style="width: 25%;">
        <div class="collapsible-title is-active" id="title1-tab">Title 1
            <i class="fas fa-solid fa-chevron-right"></i>
        </div>
        <div class="collapsible-title" id="title2-tab">Title 2
            <i class="fas fa-solid fa-chevron-right"></i>
        </div>
    </div>
    <div style="width: 75%;">
        <div class="collapsible-content is-active" id="title1-content">
            <h3>Title 1 Content</h3>
            <p>
              Lorem Ipsum is simply dummy text.
            </p>
        </div>
        <div class="collapsible-content non-active" id="title2-content">
            <h3>Title 2 Content</h3>
            <p>
              Lorem Ipsum has been the industry's standard dummy text.
            </p>
        </div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search