Eliminating the 'white-space' surrounding concealed images

Question

Eliminating the 'white-space' surrounding concealed images

I am currently working on a project where I have a list of images that need to be hidden or shown based on the click event of specific <li> elements. While I have managed to achieve this functionality successfully, I am facing an issue with white space appearing above or below the image that is displayed. Below is the code snippet I am using:

HTML

<div class="img-container">
    <img id="img1" src="img/image1.jpg" />
    <img id="img2" src="img/image2.jpg" />
    <img id="img3" src="img/image3.jpg" />
</div>

CSS

.img-container{
    text-align: center;
    visibility: hidden;
    margin-top: 20px;
}

JS

var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var img3 = document.getElementById('img3');

("li:nth-child(2)").on('click', function() {
    img1.style.visibility = 'visible';
    img2.style.visibility = 'hidden';
    img3.style.visibility = 'hidden';
});
("li:nth-child(3)").on('click', function(){
    img2.style.visibility = 'visible';
    img1.style.visibility = 'hidden';
    img3.style.visibility = 'hidden';
});
("li:last-child").on('click', function() {
    img3.style.visibility = 'visible';
    img2.style.visibility = 'hidden';
    img1.style.visibility = 'hidden';
});

Despite experimenting with the display: hidden CSS property along with .toggle(), I haven't been able to resolve the issue of white space around the hidden image. As I am new to JS/jQuery, I would appreciate any guidance on how to tackle this problem effectively. Thank you.

javascript jquery css jquery-mobile

Answer 1

Answer №1

If you want to control the visibility of elements in your HTML page, you can utilize the CSS property display along with values like none and block. The display property determines how an element should be displayed on the screen.

To make an image visible:

img1.style.visibility = 'visible';

You can also achieve the same effect using jQuery:

$("#img1").css("display", "block");

Similarly, to hide an image:

img1.style.visibility = 'hidden';

Or with jQuery:

$("#img1").css("display", "none");

Another tip is to consider using the inline-block value instead of block for list items to improve their layout.

Answer 2

If you want to control the visibility of elements in your HTML page, you can utilize the CSS property display along with values like none and block. The display property determines how an element should be displayed on the screen.

To make an image visible:

img1.style.visibility = 'visible';

You can also achieve the same effect using jQuery:

$("#img1").css("display", "block");

Similarly, to hide an image:

img1.style.visibility = 'hidden';

Or with jQuery:

$("#img1").css("display", "none");

Another tip is to consider using the inline-block value instead of block for list items to improve their layout.

Answer 3

Answer №2

For those seeking a jQuery solution:

var $image1 = $( "#img1" ),
    $image2 = $( "#img2" ),
    $image3 = $( "#img3" );

$( "li:nth-child(2)" ).on( "click", function() {
  $image1.show();
  $image2.hide();
  $image3.hide();
} );
$( "li:nth-child(3)" ).on( "click", function() {
  $image1.hide();
  $image2.show();
  $image3.hide();
} );
$( "li:nth-child(4)" ).on( "click", function() {
  $image1.hide();
  $image2.hide();
  $image3.show();
} );
$( "li:last-child" ).on( "click", function() {
  $image1.show();
  $image2.show();
  $image3.show();
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul style="list-style: none;">
<li>Click a button:</li>
<li><button>Show First Picture</button></li>
<li><button>Show Second Picture</button></li>
<li><button>Show Third Picture</button></li>
<li><button>Reset</button></li>
</ul>

<div class="img-container">
  <img id="img1" width="300" height="300" src="https://blognumbers.files.wordpress.com/2010/09/1.jpg" />
  <img id="img2" width="300" height="300" src="https://blognumbers.files.wordpress.com/2010/09/2.jpg" />
  <img id="img3" width="300" height="300" src="https://blognumbers.files.wordpress.com/2010/09/3.jpg" />
</div>

Answer 4

For those seeking a jQuery solution:

var $image1 = $( "#img1" ),
    $image2 = $( "#img2" ),
    $image3 = $( "#img3" );

$( "li:nth-child(2)" ).on( "click", function() {
  $image1.show();
  $image2.hide();
  $image3.hide();
} );
$( "li:nth-child(3)" ).on( "click", function() {
  $image1.hide();
  $image2.show();
  $image3.hide();
} );
$( "li:nth-child(4)" ).on( "click", function() {
  $image1.hide();
  $image2.hide();
  $image3.show();
} );
$( "li:last-child" ).on( "click", function() {
  $image1.show();
  $image2.show();
  $image3.show();
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul style="list-style: none;">
<li>Click a button:</li>
<li><button>Show First Picture</button></li>
<li><button>Show Second Picture</button></li>
<li><button>Show Third Picture</button></li>
<li><button>Reset</button></li>
</ul>

<div class="img-container">
  <img id="img1" width="300" height="300" src="https://blognumbers.files.wordpress.com/2010/09/1.jpg" />
  <img id="img2" width="300" height="300" src="https://blognumbers.files.wordpress.com/2010/09/2.jpg" />
  <img id="img3" width="300" height="300" src="https://blognumbers.files.wordpress.com/2010/09/3.jpg" />
</div>

Answer 5

Answer №3

Setting the CSS property visibility to hidden will hide an element while still maintaining its space on the page.

On the other hand, setting the CSS property display to none will hide the element completely without taking up any space on the page.

In most cases, it is more commonly needed to use:

display = 'none';

or

display = ''; // to make it visible

Answer 6

Setting the CSS property visibility to hidden will hide an element while still maintaining its space on the page.

On the other hand, setting the CSS property display to none will hide the element completely without taking up any space on the page.

In most cases, it is more commonly needed to use:

display = 'none';

or

display = ''; // to make it visible

Answer 7

Answer №4

Instead of relying solely on the visibility property, switching to the display property might offer a simpler solution. Another approach could involve streamlining your JavaScript code for easier management. One option is to reveal the corresponding img based on the index of the clicked li.

For example:

$(function() {
  $(".img-controller li").on("click", function() {
    var i = $(this).index();
    $(".img-container img").hide();
    $(".img-container img:eq(" + i + ")").show();
  });
  $(".img-container img").not(":first").hide();
});

.img-controller {
  list-style-type: none;
  padding: 0;
}
.img-controller li {
  display: inline-block;
  background: #eee;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="img-controller">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<div class="img-container">
  <img src="https://placekitten.com/50/50" />
  <img src="https://placekitten.com/50/40" />
  <img src="https://placekitten.com/50/30" />
</div>

Answer 8

Instead of relying solely on the visibility property, switching to the display property might offer a simpler solution. Another approach could involve streamlining your JavaScript code for easier management. One option is to reveal the corresponding img based on the index of the clicked li.

For example:

$(function() {
  $(".img-controller li").on("click", function() {
    var i = $(this).index();
    $(".img-container img").hide();
    $(".img-container img:eq(" + i + ")").show();
  });
  $(".img-container img").not(":first").hide();
});

.img-controller {
  list-style-type: none;
  padding: 0;
}
.img-controller li {
  display: inline-block;
  background: #eee;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="img-controller">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<div class="img-container">
  <img src="https://placekitten.com/50/50" />
  <img src="https://placekitten.com/50/40" />
  <img src="https://placekitten.com/50/30" />
</div>

Eliminating the 'white-space' surrounding concealed images

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Refresh the table data dynamically without the need for page reloading

What's the process for changing this arrow function into a regular function?

Getting a jquery lightbox up and running

Trouble with setting the color attribute using setProperty in a GXT text area

Console is displaying a Next.js error related to the file path _next/data/QPTTgJmZl2jVsyHQ_IfQH/blog/post/21/.json

Adding a dynamic form to each row in a table: A step-by-step guide

What is the process for setting up redux in _app.tsx?

Using Node.js to retrieve table data from a URL

Looking to center the numbers in my ordered list within a border box - any tips on how to achieve this?

Tips for successfully passing multiple data IDs in a Bootstrap modal

"Did you come across `item()` as one of the methods within the array

Sending javascript data to php within a modal popup

Challenges with loading content on the initial page load using the HTML5

Trouble arises when adding HTML elements to a Content Editable Div. Any text inputted after programmatically inserting HTML content will merge with the last HTML tag instead

Angular failing to reflect changes in my select element according to the model

Utilizing MDX Component Properties in NextJS

Setting the Datetimepicker to be used with every input field

Managing PHP AJAX POST requests and storing data in a database

Accessing JSON data from a URL for use within a specific context

When transitioning between single-page Angular applications using Protractor, a "JavaScript error: document unloaded while waiting for result" may be encountered