how to hide a div that is empty and another div associated with it which may or maynot be empty?

I have a speech bubble called philosophy bubble which is just a div styled to look like a quote bubble and the sharepoint control is what fills up the content of the bubble but sometimes the bubble may not have any text and needs to be hidden. Not just the bubble but also the text below which is like 'Mr. X's saying' should be hidden since the bubble is empty. How is is achieved in jquery?

<div class="philosophy-bubble">Quote goes here                  
</div>                              
<span class="credit">
Quoter..
</span>

Answers


Assuming you only want to hide the bubbles that have no text in them, you could do it this way:

$(".philosophy-bubble").each(function() {
    if (this.innerHTML.match(/\S/)) {
        $(this).hide().next(".credit").hide();

    }
});

If you have access to the HTML, you could wrap both the <div> and <span> in a parent <div> tag. The parent could then be hidden.

$('.philsophy-bubble').parent().hide()

If you have access to jQuery (I see you tagged this jQuery), you can use the .next() function which gets the next sibling (vertically).

Something like...

$('.philosophy-bubble').hide().next().hide();


Need Your Help

What is std::pair?

c++ boost stl std-pair

What is std::pair for, why would I use it, and what benefits does boost::compressed_pair bring?

Ember Select - set outlet to selection

javascript ember.js

I'm looking to create a dropdown list and have it populated with values from my model.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.