how can I show a div based on content in another div jQuery

Question

I have multiple divs in html such:

<div class="litter"> 
    <div class="litter-1">
        <div class="status">Available</div> 
        <div class="available"><img /></div>
    </div>
    <div class="litter-2">
        <div class="status">Available</div> 
        <div class="available"><img /></div>
    </div>
</div>

The status text will vary based on user input. If the status is available the available class should not show. But if the status is unavailable then it should. The image is present all the time but only displaying if the status changes.

I can get the jQuery to either hide all of the images, or show them all, but not based on the html value of the status.

jQuery

if($('.litter > .status').html()==="Available") {
    $(this).next('.available').hide();
    } else {
    $('.available').show();
}

Any help?

Answer 1

You could use a loop using jQuery .each() :

 // change selector to '.litter .status' $('.litter .status').each(function() { // loop through each .status element // get partner img container .available var imgContainer = $(this).parent().find('.available'); if ($(this).text() === "Available") { imgContainer.hide(); } else { imgContainer.show(); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="litter"> <div class="litter-1"> <div class="status">Available</div> <div class="available"><img src="https://via.placeholder.com/150/" alt="placeholder1" /></div> </div> <div class="litter-2"> <div class="status">Other status</div> <div class="available"><img src="https://via.placeholder.com/150/" alt="placeholder2" /></div> </div> </div> 

Answer 2

You can toggle a single class, status-available , and combine it with the adjacent sibling combinator to control the display of the image.

<!-- Image will show -->
<div class="status status-available">…</div>

vs.

<!-- Image will not show -->
<div class="status">…</div>

Example

 /* Image is hidden by default */ .available > img { display: none; } /* Adjacent sibling combinator in action */ .status-available + .available > img { display: block; } 

 <div class="litter"> <div class="litter-1"> <div class="status status-available">Available</div> <div class="available"> <img src="http://placekitten.com/150/150" alt="Cute cat" /> </div> </div> <div class="litter-2"> <div class="status">Available</div> <div class="available"> <img src="http://placekitten.com/150/150" alt="Cute cat" /> </div> </div> </div> 

Answer 3

Ok, so Haldo put me on the right track, but in order to make it all come together with the string. Instead of if ($(this).text() === ("Available") I had to use this if ($(this).text().indexOf('Needs a Forever Home') > -1)

The rest of the code stays the same as Haldo's.