CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Steggie
Steggie

Reputation: 525

Show div if another div has content

So I don't get why this isn't working. I want to show a Div when another div has a value. I got this code from stackoverflow and it's pretty simple. But it doesn't work for me. No console errors..

$(document).ready(function(){
   if ($(".txt").html().length > 0) {
     $('.btn-01').show();
   }                                           
 });

If the html value of .txt is larger then 0 then show btn-01.

But it doesn't. In my web inspector it just says:

<div style="display: block;" class="btn-01"><p>Things</p></div>

If I remove the script it says:

<div class="btn-01"><p>Things</p></div>

So it does do something. I tried changing the show to hide. But no go.

<div style="display: none;" class="btn-01"><p>Things</p></div>

I tried:

$(document).ready(function(){
       if ($(".txt").html().length > 0) {
         $('.btn-01').addClass('showme);
       }                                           
     });

btn-01 css:

.btn-01 {
    background: #f60;
    color: #fff;
    border-radius: 2px;
    padding: 5px;
    text-align: center;
    margin: 40px auto 0px auto;
    width: 90%;
}

But that didn't work either. Does anyone know whats going on here? Maybe I should work with an else statement? Help would be much appreciated.

JsFiddle

Upvotes: 0

Views: 1536

Answers (5)

Steggie
Steggie

Reputation: 525

You guys where all right. I needed to place the code in some Session file (Ajax). Now its working with the original code and even some that you provide.

Thanks!

Upvotes: 0

A.Sharma
A.Sharma

Reputation: 2799

You need to either set the button to display none prior to the window loading or add an "else" statement to hide the element:

.btn-01{
  display:none;
}

OR

$(document).ready(function(){
       if ($(".txt").html().length > 0) {
         $('.btn-01').show();
       }
       else
       {
         $('.btn-01').hide();
       }
     });

See the fiddle: https://jsfiddle.net/r89gg7tp/

IMPORTANT TO CONSIDER

If you have entered a line break between the starting and closing tags of the element, this will add to the length. You need to set the txt div to be in the following format:

<div class='txt'></div>

It may be better to change your function to this:

$(document).ready(function(){
       if ($(".txt").html().trim(' ').length > 0) {
         $('.btn-01').show();
       } else {
         $('.btn-01').hide();
       }
     });

This way you trim the whitespace before checking.

See the second fiddle: https://jsfiddle.net/r89gg7tp/3/

Upvotes: 1

orangespark
orangespark

Reputation: 649

You need to hide the btn-01 with a "display:none" in the stylesheet and then execute your script. I think you are having a "display:none !important" which is overriding the jquery show() function inline style.

Upvotes: 1

Jai
Jai

Reputation: 74738

You can use .contents() with .toggle(): 

$(document).ready(function() {
  $('.btn-01').toggle($(".txt").contents().length > 0);
});
.btn-01{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="txt">
  <h3>Things Title</h3>
</div>

<div class="btn-01">
  <p>Things</p>
</div>

Upvotes: 0

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

This might help you.

 $(document).ready(function(){
       if (!$.trim($(".txt").html())){
           $('.btn-01').addClass('showme');
       }                                           
 });

Please let me know if you've any queries.

Upvotes: 0

Related Questions