Activate Span element when image is clicked

To show and hide different span tags when clicking on specific images, you can use the following jQuery script:

$("#img1").on('click', function() {
  $("#div1").fadeIn();
  $("#div2,#div3").fadeOut();
});
$("#img2").on('click', function() {
  $("#div2").fadeIn();
  $("#div1,#div3").fadeOut();
});
$("#img3").on('click', function() {
  $("#div3").fadeIn();
  $("#div1,#div2").fadeOut();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<img src="css/imagens/missao2.png" alt="mission" id="img1" />
<img src="css/imagens/missao2.png" alt="mission" id="img2" />
<img src="css/imagens/missao2.png" alt="mission" id="img3" />

<span id="div1" style="display:none;position:absolute;border:3px solid blue;">Span 1</span>
<span id="div2" style="display:none;position:absolute;border:3px solid blue;">Span 2</span>
<span id="div3" style="display:none;position:absolute;border:3px solid blue;">Span 3</span>
javascriptjquerycss

Answer №1

Everything is functioning properly now that jQuery has been included (thanks to the helpful edit).

There still seems to be a lingering question about what you mean by "open a span tag," but I'll assume you meant show.

Edit:

It appears from the comments that your code is enclosed within a p element with a style attribute of display:none. This will cause issues as the entire block, including its contents, will remain hidden. Remove the display:none from the outer wrapper (p)!

<p class="txt_h"><!-- the code here is fine --></p>

Alternatively, you can toggle the visibility of the outer p when an item is clicked. Check out the code snippet below for implementation.

$('#showthings').click(function() {
  $('.txt_h').show();
});

$("#img1").on('click', function() {
  $("#div1").fadeIn();
  $("#div2,#div3").fadeOut();
});
$("#img2").on('click', function() {
  $("#div2").fadeIn();
  $("#div1,#div3").fadeOut();
});
$("#img3").on('click', function() {
  $("#div3").fadeIn();
  $("#div1,#div2").fadeOut();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="showthings">Click to show images</span>
<p class="txt_h" style="display:none;">
<img src="css/imagens/missao2.png" alt="missao" id="img1" />
<img src="css/imagens/missao2.png" alt="missao" id="img2" />
<img src="css/imagens/missao2.png" alt="missao" id="img3" />

   
<span id="div1" style="display:none;position:absolute;border:3px solid blue;">DIV1</span>
<span id="div2" style="display:none;position:absolute;border:3px solid blue;">DIV2</span>
<span id="div3" style="display:none;position:absolute;border:3px solid blue;">DIV3</span>
</p>

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

What is the best way to retrieve promiseValue from the response array?

I've run into some challenges while using Promise.all() for the first time with two get-methods. When I check the response in my console log, I can see the data I'm trying to fetch under promiseValue. However, I'm unsure of how to access it. ...

javascriptvue.jspromisegetfetch

What are the steps to perform typecasting in nodejs?

Struggling with converting string values to numbers and encountering an error. const express=require('express'); const bodyParser=require('body-parser'); const app=express(); app.use(bodyParser.urlencoded({extended:true})); app.get(&qu ...

javascriptnode.jsexpressweb-development-server

Tips for recognizing users in socket.io?

I'm currently developing a chat application with socket.io. However, one issue I am facing is identifying the sender of a message. Unlike in Express where we have the "req" (request) variable to easily identify users, socket.io does not provide such f ...

javascriptnode.jssocket.io

No values are being assigned to the array elements in the Node.js application

I've been struggling with an issue in my Express project for a day now. I can't seem to push some data into an array element. Let me walk you through my code and the data involved. Here is the result data retrieved from MongoDB: result = { n ...

javascriptarraysnode.jsobject

The href link does not direct to the main landing page

Clicking on the 'Visit website' button does not redirect me to home.html. Instead, it does nothing. How can I fix this issue? Any help would be appreciated. Preview.prototype = { create : function() { // Creating the Preview structur ...

javascripthtmlhrefhttp-redirect

Changing the i18n locale in the URL and navigating through nested routes

Seeking assistance to navigate through the complexities of Vue Router configurations! I've dedicated several days to integrating various resources, but have yet to achieve successful internalization implementation with URL routes in my unique setup. ...

javascriptvue.jsvue-routervue-i18n

How can I embed HTML elements into a Three.js rendered 3D image?

Using React framework, I am working with a 3D image in glb/gltf format and rendering it with three.js packages. My goal is to assign a unique number to each object and display it above them. In my approach, I attempted to access the canvas element and add ...

javascriptreactjsthree.js3dgltf

Tips for avoiding the 'ResizeObserver loop finished with unhandled notifications.' error when using React with mui/material/Table

This is our current code snippet: import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableContainer from '@mui/material/TableC ...

javascriptreactjsmaterial-ui

Hide other dropdowns using jQuery when toggled

I have implemented the following jQuery code snippet to toggle a dropdown menu: // Dropdown toggle jQuery('.ldropdown-toggle').click(function(){ jQuery(this).next('.ldropdown').toggle(); }); Is there a way to modify this cod ...

jquery

undefined childrenWithProps in React with JavaScript

GalleryPhotosVideos.js class GalleryPhotosVideos extends React.Component { constructor(props) { super(props); this.state = { data3 }; } render (){ const childrenWithProps ...

javascriptreactjs

Tips for utilizing window.scrollTo in order to scroll inside an element:

I'm experiencing an issue where I have a vertical scrollbar for the entire page, and within that, there's an element (let's call it 'content') with a max-height and overflow-y scroll. The 'content' element contains child ...

javascripthtmlcsstypescript

Unwanted extra border and padding are showing up at the bottom of my HTML

Recently, I decided to experiment with the jquery superslide plugin on a website of mine. To my surprise, there was an unexpected padding at the bottom of the page. My suspicion is that the display area is not being calculated correctly or that a margin is ...

jquerycsshtml

Animating a CSS overlay

My goal is to design an overlay using the following HTML and CSS code snippets div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 50%; right: 0; width: 20 ...

htmlcssanimationoverlay

Error message: The variable GLOBAL is not defined in the fetch-mock code

I am currently using fetch-mock to write unit tests for functions that utilize isomorphic-fetch. Below is a sample of the test suite I have created: import connect from '../../src/utils/connect'; import fetchMock from 'fetch-mock'; ...

javascriptunit-testingreactjses6-promisejestjs

Adjust the width of the TinyMCE Editor to automatically resize based on the content being

Is it possible for TinyMCE to adjust the content within an absolutely positioned container and update the width while editing? <div class="container"> <textarea>This is my very long text that should not break. This is my very long text tha ...

javascripthtmlcsstinymcewysiwyg

Retrieve the bounding rectangle of a div that has the CSS style `display: contents` using the getBoundingClientRect

My objective is to apply styling and obtain the bounding box of an entire "row" within a CSS grid, including features like highlighting when hovering over it. To achieve the styling aspect, I make use of the display: contents property, so that the styles ...

javascripthtmlcss

Merging object keys and values from JSON arrays based on their keys, using JavaScript

Is there a way to merge object keys' values from JSON arrays based on their key? json1 = [ {key:'xyz', value:['a','b']}, {key:'pqrs', value:['x','y']} ] json2 = ...

javascriptarraysjson

Is it necessary to set up Tailwind CSS for each new project we start?

Is it necessary to install Tailwind CSS and its files for each new project in every new directory? I'm uncertain if this is the correct process, or if there is an alternative method available. Furthermore, when making changes to files on a live serve ...

csstailwind-css

Obtaining a value from an input field in Vue.js

Just starting out with Vue and could use a hand extracting a value from an input field: Here's what I have in my form: <input type="hidden" id="groupId" value="1"> If I were using jQuery, I would do the following: ...

javascriptvue.js

How do I send multiple values from a child to a parent in Vue.js, while also passing another parameter in the parent's v-on event?

Behold, a demonstration of code. Vue.component('button-counter', { template: '<button v-on:click="emit_event">button</button>', methods: { emit_event: function () { this.$emit('change', 'v1&apos ...

javascriptvue.js