When the last class is hidden, A message will be shown

Related searches

I have a message along with other classes, .tab inside a parent div.

Goal: When I click on a .tab, it will hide and after a last tab is clicked, the message will show up.

Problem: When the first tab is clicked, the message shows up right away.

Please take a look at my sample in jsfiddle

Code:

$('.tab').click(function() {
  $(this).hide();
  if (!$('#banner-message').hasClass('tab')) {
    $('.message').show();
  }
})
#banner-message {
  border: 1px solid #000;
  height: 42px;
  width: 70%;
  display: flex;
}

.tab {
  height: 15px;
  padding: 2px 10px;
  cursor: pointer;
  border: 1px solid red;
  margin-right: 10px
}

.message {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <span class="message">
      This is a banner message
      </span>
  <span class="tab">Close Tab1</span>
  <span class="tab">Close Tab2</span>
  <span class="tab">Close Tab3</span>
</div>

Your current if logic is not correct, since you are checking:

!$('#banner-message').hasClass('tab')

which means: If element with id banner-message doesn't have class tab, then do something...

One solution is to check if the amount of visible .tab elements is 0.

You can do it by using the jQuery selector: $(".tab:visible"), this will get all elements with class tab that are visible, so if this equals to 0, show the message.

See below:

$('.tab').click(function() {
  $(this).hide();
  if ($('.tab:visible').length == 0) {
    $('.message').show();
  }
})
#banner-message {
  border: 1px solid #000;
  height: 42px;
  width: 70%;
  display: flex;
}

.tab {
  height: 15px;
  padding: 2px 10px;
  cursor: pointer;
  border: 1px solid red;
  margin-right: 10px
}

.message {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <span class="message">
   This is a banner message
  </span>
  <span class="tab">Close Tab1</span>
  <span class="tab">Close Tab2</span>
  <span class="tab">Close Tab3</span>
</div>

When the last class is hidden, A message will be shown, I have a message along with other classes, .tab inside a parent div.Goal: When I click on a .tab, it will hide and after a last tab is clicked, the message will show� Definition and Usage. The visibility property specifies whether or not an element is visible.. Tip: Hidden elements take up space on the page. Use the display property to both hide and remove an element from the document layout!

You just need a better logical condition. If the number of visible tabs is 0, then show the message.

$(function() {
  $('.tab').click(function() {
    $(this).hide();
    if ($(".tab:visible").length == 0) {
      $("#banner-message .message").show();
    }
  });
});
#banner-message {
  border: 1px solid #000;
  height: 42px;
  width: 70%;
  display: flex;
}

.tab {
  height: 15px;
  padding: 2px 10px;
  cursor: pointer;
  border: 1px solid red;
  margin-right: 10px
}

.message {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <span class="message">
      This is a banner message
      </span>
  <span class="tab">Close Tab1</span>
  <span class="tab">Close Tab2</span>
  <span class="tab">Close Tab3</span>
</div>

HTMLElement.hidden, The hidden property applies to all presentation modes and should not be used to hide content block is used to contain a thank you message that is displayed after a user agrees to an unusual request. <div id="welcome" class="panel"> < h1>Welcome to Foobar.com! Last modified: Mar 23, 2019 , by MDN contributors. 3) Parent Portal – there is class data on the “Enroll” tab – the Parent Portal is a hard coded application and the data shown here is not editable – the only columns that can be hidden are the Instructors and the Openings. In your database go to Tools>Parent Portal Settings>Settings tab, and they are near the bottom.

Please try with the below code snippet.

JS

$('.tab').click(function() {
    $(this).hide();
  if($(".tab").is(":visible") == false) { 
    $('.message').show();
  }
})

I have modified if condition so it will show message when all tabs will be hide.

How To Find Out if an Element is Hidden, Tip: Also check out How To - Toggle Hide/Show. Tip: For more information about Display and Visibility, read our CSS Display Tutorial. ❮ Previous Next ❯� Learn hidden message with free interactive flashcards. Choose from 39 different sets of hidden message flashcards on Quizlet.

Bootstrap CSS Helper Classes Reference, Add meaning through text-colors with the classes below. Links will These classes are used to show and/or hide content by device via media queries. Use one� Item Types and Message Classes. 06/08/2019; 2 minutes to read; In this article. The message class for an item is defined by its MessageClass property, and is used to identify the form that should be used to display the item. The following table lists the message classes and their corresponding forms.

:hidden Selector, Elements that are not in a document are not considered to be visible; jQuery does not via other methods, using a class for example, can provide better performance. "span" ).last().text( "Found " + $( "input:hidden" ).length + " hidden inputs. Last Updated on March 3, 2020. The hidden value of type defines a form field that is never displayed to the user. The user cannot change the value of the field, or interact with it. When the user submits the form, all of the data they have entered is sent, including the data stored invisibly in the hidden fields. Why Hide a Field?

The author’s message is the theme in a work of fiction.. In The Outsiders, Hinton’s message is that class conflict is pointless, unwarranted, and destructive.. Ponyboy begins by explaining

Comments
  • The banner-message element doesn't have the tab class.
  • hehehe for just a couple of seconds... but anyway, I'll upvote you :D
  • Thanks Jayesh Goyani, Twisty and Calvin Nunes a lot to share not only one solution, but many! Every solution here is absolutely acceptable and appreciated. So, I upvoted all solutions and accepted one with detail explanations. Also, can you please show me how to set up for run code snippet right on this page. Thanks
  • to setup a runnable snippet, when adding or editing an answer/question, look for the button that looks like <> on the toolbar, click it and you'll be able to create a snippet