Utilize Javascript to conceal images

Question

Utilize Javascript to conceal images

On a regular basis, I utilize these flashcards. Recently, I have started using images as answers. However, I am facing an issue - I am unable to conceal the pictures. My preference is for the images to be hidden when the webpage loads.

function myShowText(id) {
  document.querySelector('#' + id + ' .answer').style.color = 'black';
}

function myHideText(id) {
  document.querySelector('#' + id + ' .answer').style.color = 'white';
}

.answer {
  border-style: solid;
  border-color: #287EC7;
  color: white;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8>
  <title> Flashcards VBA </title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <script src="js/scripts.js></script>
  <h3> Flashcards </h3>
  <p class="question">
    The primary question
  </p>

  <div id="bash_start"><
    p class="answer">
      img src="image.jpg">
    </p>
  </div>
</body>
</html>

javascript html css

Answer 1

Answer №1

To implement hiding and showing content with CSS, you can use the following steps:

.invisible {
    visibility: hidden;
}

Next, apply the class .invisible to the content you want to hide:

<div class="content invisible">
    <p>Some hidden text</p>
</div>

Then, you can reveal the content by removing the .invisible class dynamically with JavaScript:

document.querySelector('.content').classList.remove('invisible');

Here is an example demonstrating this functionality:

var btn = document.querySelector('button');
var content = document.querySelector('.content');

btn.addEventListener('click', function() {
  content.classList.remove('invisible');
});

.invisible {
  visibility: hidden;
}

<button type="button">Show Content</button>

<div class="content invisible">This content will be revealed upon button click.</div>

Answer 2

To implement hiding and showing content with CSS, you can use the following steps:

.invisible {
    visibility: hidden;
}

Next, apply the class .invisible to the content you want to hide:

<div class="content invisible">
    <p>Some hidden text</p>
</div>

Then, you can reveal the content by removing the .invisible class dynamically with JavaScript:

document.querySelector('.content').classList.remove('invisible');

Here is an example demonstrating this functionality:

var btn = document.querySelector('button');
var content = document.querySelector('.content');

btn.addEventListener('click', function() {
  content.classList.remove('invisible');
});

.invisible {
  visibility: hidden;
}

<button type="button">Show Content</button>

<div class="content invisible">This content will be revealed upon button click.</div>

Answer 3

Answer №2

If you're looking to hide your image when the page loads, you can simply add some CSS to achieve that. Just use visibility: hidden; or display: none; on your image(s).

Then, on the JavaScript/jQuery side, you can trigger any event you want and change the visibility back to visible; or block/inline-block;.

<img class="flashCards" src="https://cdn4.iconfinder.com/data/icons/champions-1/512/Champions-04-512.png">
<button id="validate_btn" onclick="validate()">Validate</button>

<style>

img.flashCards { width: 150px; visibility: hidden; }
</style>

<script>
function validate() {
  var flashCards = document.getElementsByClassName('flashCards');
  //Need a for loop for each image element
  //If only one image use getElementById directly with the style
  for(i=0; i<flashCards.length; i++) {
    flashCards[i].style.visibility = 'visible';
    flashCards[i].style.backgroundColor = 'green';
  }
}
</script>

Answer 4

If you're looking to hide your image when the page loads, you can simply add some CSS to achieve that. Just use visibility: hidden; or display: none; on your image(s).

Then, on the JavaScript/jQuery side, you can trigger any event you want and change the visibility back to visible; or block/inline-block;.

<img class="flashCards" src="https://cdn4.iconfinder.com/data/icons/champions-1/512/Champions-04-512.png">
<button id="validate_btn" onclick="validate()">Validate</button>

<style>

img.flashCards { width: 150px; visibility: hidden; }
</style>

<script>
function validate() {
  var flashCards = document.getElementsByClassName('flashCards');
  //Need a for loop for each image element
  //If only one image use getElementById directly with the style
  for(i=0; i<flashCards.length; i++) {
    flashCards[i].style.visibility = 'visible';
    flashCards[i].style.backgroundColor = 'green';
  }
}
</script>

Utilize Javascript to conceal images

Answer №1

Answer №2

Similar questions

Angular's route resolve feature does not wait for the promise to resolve before

Tips for concealing the Google Chrome status bar from appearing on a webpage

Changing the cursor to a waiting state following a mouse click

Using setInterval in JavaScript to automatically update a TextField

The Vue.js route is not aligning with its defined path, causing a mismatch

Protractor - selecting a hyperlink from a list

Having trouble getting Angular-UI-Select to work with a basic variable on $scope?

Looking for a way to retrieve Instagram data with Python using Selenium, following Instagram's recent API changes? Having trouble locating all entries, as only 12 are showing up?

Utilize jQuery to create a dynamic image swapping and div showing/hiding feature

Achieving Inline Icons with Text in Bootstrap 5 Button

What could be causing bundle.js to remain in a pending status on my website?

Make the header background color shift as the page is scrolled down on the fixed header

"Invalid operation" error encountered within a Flask function in Python

Concealed checkbox value in jQuery

When attempting to submit information to a database table, I encounter an error in the browser console: "Uncaught (in promise) Error: Request failed with status code 404."

The typeof operator is not functioning as anticipated when used with an ajax response

Searching in the Kendo Dropdown List using text and value

javascript utilize bluebird promise to asynchronously retrieve the first file from a given list

Can you suggest a method to save cookies or HTML5 localStorage across multiple WebBrowser instances on Windows Phone?

Maintain the image's aspect ratio by setting the width equal to the height when the height is