CODEWITHSUNDEEP
javascriptjquerycss
Ken
Ken

Reputation: 388

Hide div if data attributes match jQuery

Simple tab setup, trying to hide a nav control if the corresponding content pane is empty. I'd like to use data attribute (data-content) to match elements.

The content pane hides fine, however the nav control does not. What am I missing? I feel like I might be over thinking it a bit...

jQuery; if content tab is empty, hide corresponding nav control based on matching data attribute.

Basic structure:

$('.tabs-content li').each(function(){
      if($.trim($(this).text()) == '' && $(this).children().length == 0){

		// hides content pane		
		$(this).hide(); 

		// should hide matching nav element
        if ($(this).attr('data-content')  == "data-content" ) {
            $('.tabs-navigation li').hide();
         }
		 
      }
    });
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
      <nav>
        <ul class="tabs-nav">
          <li><a href="#" data-content="tab1" class="selected">Tab 1</a></li>
          <li><a href="#" data-content="tab2">Tab 2</a></li>
          <li><a href="#" data-content="tab3">Tab 3</a></li>
        </ul> <!-- tabs-nav -->
      </nav>

      <ul class="tabs-content">
        <li data-content="tab1" class="selected">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        <li data-content="tab2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        <li data-content="tab3"> </li>
      </ul> <!-- tabs-content -->
    </div> <!-- tabs -->

Fiddle: https://jsfiddle.net/tpveuqsk/2/

Upvotes: 0

Views: 778

Answers (3)

Kimberley
Kimberley

Reputation: 459

This should work. Save the data-content value of tabs-content item. The data-content in tabs-nav works on the "a" element not the "li" element. You want to hide both the a en li element so see the code below:

$('.tabs-content li').each(function(){
if($.trim($(this).text()) == '' && $(this).children().length == 0){

// hides content pane       
$(this).hide(); 

attrValue= $(this).attr('data-content');

// should hide matching nav element
$('.tabs-nav li').each(function(){
    if ($(this).find('a').attr('data-content')  === attrValue ) {
    $(this).hide();
 }
})

Upvotes: 0

SilverSurfer
SilverSurfer

Reputation: 4368

You can do it more simple, like this:

$('.tabs-content li').each(function(){
    if ($(this).text().trim() == "" ) {
        $(this).hide();
        var data = $(this).attr("data-content")
        $(".tabs-nav a[data-content='"+data+"']").closest("li").hide()
     }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
  <nav>
    <ul class="tabs-nav">
      <li><a href="#" data-content="tab1" class="selected">Tab 1</a></li>
      <li><a href="#" data-content="tab2">Tab 2</a></li>
      <li><a href="#" data-content="tab3">Tab 3</a></li>
    </ul> <!-- tabs-nav -->
  </nav>

  <ul class="tabs-content">
    <li data-content="tab1" class="selected">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li data-content="tab2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li data-content="tab3"> </li>
  </ul> <!-- tabs-content -->
</div> <!-- tabs -->

Upvotes: 1

fixatd
fixatd

Reputation: 1404

You could use the data-content attribute for your query, and then just look for the closest li, see the code below:

$('.tabs-content li').each(function(){
  if($.trim($(this).text()) == '' && $(this).children().length == 0){
  	
    $('[data-content="'+$(this).attr('data-content')+'"]').closest('li').hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
  <nav>
    <ul class="tabs-nav">
      <li><a href="#" data-content="tab1" class="selected">Tab 1</a></li>
      <li><a href="#" data-content="tab2">Tab 2</a></li>
      <li><a href="#" data-content="tab3">Tab 3</a></li>
    </ul> <!-- tabs-nav -->
  </nav>

  <ul class="tabs-content">
    <li data-content="tab1" class="selected">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li data-content="tab2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li data-content="tab3"> </li>
  </ul> <!-- tabs-content -->
</div> <!-- tabs -->

Upvotes: 0

Related Questions