CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Freddy
Freddy

Reputation: 867

Get child div content if class exists on parent

I have a module where, on hover, I want the content on the right to change (stuff in the blue div in the demo below).

To achieve this, what I'm trying to do is:

But unsure on how I can get .content when class .active exists in .overview?

I have the following markup (simplified):

// 1. Check if li has class active
if ($('li.tabs').hasClass('active')) {
  // 2. get .content div from li where class .active exists

}
.tabs{
border: 1px solid yellow;
}

.list {
  border: 1px solid red;
  flex-basis: 40%;
}

.list li {
  list-style-type: none;
}

.overview {
  border: 1px solid blue;
  -ms-flex-preferred-size: 60%;
  flex-basis: 60%;
}
<script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1'></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="d-flex flex-row">

  <div class="list">
    <li class="tabs active">
      <div class="header"><span>Header</span></div>
      <div class="content d-none"><p>content</p></div>
    </li>
    <li class="tabs">
      <div class="header"><span>Header 2</span></div>
      <div class="content d-none"><p>content 2</p></div>
    </li>
  </div>

  <div class="overview"> </div>

</div>

Upvotes: 1

Views: 174

Answers (2)

skobaljic
skobaljic

Reputation: 9614

Complete code for your, together with active class toggle:

var overview = $('.overview');
$('.tabs').each(function(i) {
    var thisTab = $(this);
    var thisContent = thisTab.find('.content').html();
    thisTab.on('mouseenter', function(e) {
        thisTab.addClass('active');
        overview.html(thisContent);
    }).on('mouseleave', function(e) {
        thisTab.removeClass('active');
        overview.html('');
    });
});
.tabs {
    border: 1px solid yellow;
}
.tabs.active {
    background: none yellow;
}
.list {
    border: 1px solid red;
    flex-basis: 40%;
}
.list li {
    list-style-type: none;
}
.overview {
    border: 1px solid blue;
    -ms-flex-preferred-size: 60%;
    flex-basis: 60%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class="d-flex flex-row">
      <div class="list">
          <li class="tabs">
              <div class="header"><span>Header</span></div>
              <div class="content d-none">
                  <p>Content 1</p>
              </div>
          </li>
          <li class="tabs">
              <div class="header"><span>Header 2</span></div>
              <div class="content d-none">
                  <p>Content 2</p>
              </div>
          </li>
      </div>
      <div class="overview"> </div>
  </div>

Also on JSFiddle

Upvotes: 2

Greedo
Greedo

Reputation: 3549

You can select a children by letting a space between the selectors (in JQuery):

$(".li.tabs.active .content")

will select all the content whom parents have the active class

Upvotes: 0

Related Questions