Hide div if data attributes match jQuery

Question

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/

like this ? jsfiddle.net/tpveuqsk/5

Carsten Løvbo Andersen
– Carsten Løvbo Andersen

2018-08-01 12:24:27 +00:00
Commented Aug 1, 2018 at 12:24 — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Aug 1, 2018 at 12:24

SilverSurfer · Accepted Answer · 2018-08-01 12:33:08Z

1

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 -->

answered Aug 1, 2018 at 12:33

SilverSurfer

4,3647 gold badges27 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ken Over a year ago

The other comments were both helpful and useful. However @SilverSufer solution solved the question in the most elegant way. This solution worked for my use case and could also be repurposed for other scenarios.

SilverSurfer Over a year ago

@Ken Glad to help you.

fixatd · Accepted Answer · 2018-08-01 12:31:04Z

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 -->

Kimberley · Accepted Answer · 2018-08-01 12:45:15Z

0

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();
 }
})

answered Aug 1, 2018 at 12:45

Kimberley

4692 silver badges6 bronze badges

Collectives™ on Stack Overflow

Hide div if data attributes match jQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related