Conceal the image within the second and third div elements using jQuery

I am facing an issue with my div structure

<div class="block_content">
    <img src="image1.png">
</div>
<div class="block_content">
    <img src="image2.png">
</div>
<div class="block_content">
    <img src="image3.png">
</div>

My goal is to hide image2 and image3, and I attempted to do so with the following code:

 $(document).ready(function ($){
    $('div.block_content').each(function() 
    {
         if($("div.block_content:eq(1)").find('img').length)
         {
            $("div.block_content:eq(1)").addClass('hide-for-small');
         } 
         if($("div.block_content:eq(2)").find('img').length)
         {
            $("div.block_content:eq(2)").addClass('hide-for-small');
         } 
    });
  });

Unfortunately, the above jquery code does not have the desired effect. It seems that I need to inspect each div individually because sometimes they may contain text only. In summary, if a div contains text, then show all three divs, otherwise hide the last two divs.

I would greatly appreciate any assistance or suggestions. Thank you in advance.

jqueryhtmlcss

Answer №1

For information on using the CSS :nth-child selector, check out :nth-child - CSS

$(".block_content:not(:first-child) img").hide();

You can also achieve this with pure CSS:

.block_content:not(:first-child) img{ display:none}

If you prefer not to use the :not selector, here's an alternative approach:

.block_content:nth-child(n+2) img{ display:none}

Another option is a bit more complex but will get the job done as well:

img{ display:none}
.block_content:first-child img{ display:block}

Alternatively, you can utilize the hidden attribute like this:

<div id="block1" class="block_content">
    <img src="image1.png" />
</div>
<div id="block_2" class="block_content">
    <img src="image2.png" hidden />
</div>
<div id="block_3" class="block_content">
    <img src="image3.png" hidden />
</div>

Answer №2

$(document).ready(function (){
    $("div.block_content").find("img").eq(1).hide(); 
    $("div.block_content").find("img").eq(2).hide(); 
 });
 
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<div class="block_content">
    <img width="50" height="50" src="https://i.imgur.com/OB0y6MR.jpg"> 
     <br>
    <p>Img 1 Show</p>
</div>
<div class="block_content">
    <img width="50" height="50" src="https://i.imgur.com/OnwEDW3.jpg">
    <br>
    <p>Img 2 Hide</p>
</div>
<div class="block_content">
    <img width="50" height="50" src="https://i.imgur.com/CzXTtJV.jpg">
    <br>
    <p>Img 3 Hide</p>
</div>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with spacing dropdown choices within primary navigation bar

Struggling with my final project for a class as the semester comes to a close. I've received minimal help from my Professor and hit a roadblock. The main navigation on the side is working correctly, but the dropdown options are stacking on top of each ...

htmlcss

Experiencing difficulties with coding on the website and aligning an image in the center

I'm encountering issues with the code below. <tbody> <tr align="center"> <td> <p align="right"><font face="Arial, Helvetica, sans-serif"><strong>Processors</strong> <img src="images/IntelPentium4.jpg" alig ...

htmlcss

Troubleshooting problem with displaying columns in Datatable's SearchPane

I've been experimenting with SearchPanes and have successfully configured it to work smoothly. Without using the button, the column layout value of "columns-4" functions as expected. However, I encountered an issue when I added the button and the Sea ...

jquerybootstrap-4datatables

Menu selection without javascript

Recently, I encountered an issue with a menu containing tabs. When hovering over a tab, a list of items appears at the bottom of the tab. However, I decided that I wanted this list to transition downwards instead of simply appearing (previously set as disp ...

htmlcssmenu

CSS hover effects are not displayed when using the input type button

I'm having issues with my hover effects not showing: <input type="button" class="button" value="Click"> However, this code works fine: <button class="button">Click</button> The CSS codes are ...

htmlcssanimationcss-animations

Can you guide me on where to find the login with Facebook button on this site?

I am currently working on integrating a Facebook authentication system into my app, but I find the default log in button provided by Facebook developers section to be quite unappealing. My Question: I am curious about how websites like Stack Overflow man ...

cssfacebook

Positioning tooltip arrows in Highcharts

I'm attempting to modify the Highcharts tooltip for a stacked column chart in order to have the arrow on the tooltip point to the center of the bar. I understand that I can utilize the positioner callback to adjust the tooltip's position, but it ...

javascriptjqueryhtmlcsshighcharts

Editable Everywhere - Simultaneously editing all columns

Currently, I am utilizing the Jeditable plugin available at this link. My goal is to create a functionality where clicking a specific button triggers all fields within a designated row to become editable and transition into their editable state automatic ...

jquery

Position the Bootstrap button at the bottom left with absolute placement

Currently, I am utilizing Django as my web framework and Bootstrap to enhance the rendering of the frontend. My goal is to implement an "add" button on my page that will always be in the bottom left corner regardless of scrolling, overlaying any other cont ...

htmlcsstwitter-bootstrapbootstrap-4css-position

Revamp the Twitter button parameters or alter its settings

I'm working on a web page that includes a Twitter button. Before the button, there is an input field and a form where users can easily add relevant hashtags for the page. The goal is to take the text from the input field and populate it in the Twitter ...

javascriptjquerytwitter

Clicking on the button link causes it to jump to a

Currently, I am utilizing Mixitup JQuery to create a portfolio page that organizes my content based on different filters. However, I have encountered a slight issue where when clicking on an item, the Jquery function works and shuffles the content, but the ...

jqueryhtmlcss

Dynamics of Rails and the power of jQuery with ajaxStop

For my Rails 5.2 project, I have included the gems 'jquery-rails' and 'jquery-ui-rails'. I am attempting to utilize the .ajaxStop( handler ) handler as outlined in the documentation found here: https://api.jquery.com/ajaxStop/#ajaxStop ...

javascriptjqueryruby-on-railsajax

When employing a mask in Angular, the value directive does not hold any binding

<input type="text" class="form-control" [value]="phoneVariable" mask="000-000-0000"/> The use of mask in the input tag is causing issues with the functionality of [value] in Angular. For instance, if phoneVar ...

htmlangularngx-mask

Alignment of content layout across two wrapper elements

My goal is to achieve a specific layout where each pair of cards in a two-column layout is aligned based on the card with the largest content. Both cards share the same content layout and CSS. If you have any ideas or implementations that could help me ac ...

javascriptcssreactjssass

How to Adjust the Padding of Tree Row in GWT?

Have you ever seen a GWT tree before? It sort of resembles the following structure: <div class="gwt-Tree"> <div style="padding-top: 3px; padding-right: 3px; padding-bottom: 3px; margin-left: 0px; padding-left: ...

javacssgwttree

Submit Form automatically, receive XML on following page, then automatically submit new form with XML information

Hello everyone, I may have approached this problem the wrong way, so any advice is much appreciated. Currently, I have a form that collects user input, formats it into XML, inserts that XML into a textarea, and then submits it automatically using document ...

jqueryajaxformsform-submit

What is the best way to save longitude and latitude coordinates in a database using the <input> method?

Learn how to use HTML code <html> <body> <p>Press the button below to receive your coordinates.</p> <button onclick="getLocation()">Get Coordinates</button> <p id="demo"></p> <script> var x = doc ...

javascriptphphtmlajaxlaravel

Differences between Jquery's Find Method and ID Attribute

In my search for efficiency, I am currently exploring ways to quickly access an element. Which method is faster: $('body').find('#elemID'); vs. var id = $('#elemID'); ...

javascriptjquery

Build an interactive phone directory with the power of JavaScript!

Does anyone know the best way to implement this code snippet for user input and output tables using JavaScript? Take a look here This is what I have tried so far: /*index.html*/ <!doctype html> <html lang="en"> <head> <!-- Requir ...

javascripthtmlcssbootstrap-4

The appearance of the check box remains stagnant visually

Having trouble with dynamically changing the state of a checkbox based on a database value. Even though the value changes after a button click, the visual state of the checkbox remains the same. Here is the link to the JSFiddle for testing: http://jsfiddle ...

javascriptjqueryjquery-mobile