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

Using JavaScript to extract the metadata of an image from a remote location

Unable to connect the CSS file from the JSP during a Cross Domain request in Internet Explorer 9

Can you guide me in utilizing this API endpoint efficiently to enable search functionality using React Query?

Interact with the horizontal click and drag scroller to navigate through various sections effortlessly, each designed to assist you

Issue with Browsersync functionality in Docker

Adjust the body class dynamically based on the URL in AngularJS

Challenges with aligning Fontawesome stacks

Discover the exclusive Error 404 dynamic routes available only in the production version of NEXT13! Don

`In HTML, trigger blocks based on the number chosen by the user`

Save a randomly generated string in the Session, which will be replaced when accessed through a different PHP file

IE is notorious for not playing well with CSS

tips for organizing the <div> element horizontally within a design

Implementing a function in jQuery to create a "Check All" and "Uncheck All" button

Ways to designate a tab as active

Foundation 5 - ensure background-image covers the entire column width

A tool developed in Javascript that allows for the conversion of .ini files to .json files directly on the client

Exploring ways to display featured posts within specific category sections

What is the best way to display a scrollbar at the bottom of the table while setting the table height to

Utilizing React JS to dynamically populate a table with data from an external JSON file

Guide to switching between 3 classes with mouseover using JavaScript