Is it possible to link content to various div elements simultaneously?

Trying to explain my query visually, as I'm struggling with how to convey it in words. Feel free to ask for any clarifications!

Clarification: In slide one, image 01 and image 02 are initially visible. When someone clicks on the images, the text and title div should appear. It's important that the text box aligns properly with the page-wrapper. For example, if I were to set the text div to float:right, it needs to float correctly next to the page-wrapper.

Appreciate your help in advance.

Answer №1

To achieve this functionality, implementing some Javascript is necessary. You can experiment with a code structure like the following:

Here's a pseudo representation in HTML:

<img src="..." class="img1 clickImage">
<img src="..." class="img2 clickImage">

<div class="imageTitles">
    <div class="img1 imgTitle">TITLETEXT</div>
    <div class="img2 imgTitle">TITLETEXT</div>
</div>

<div class="imageInformations">
    <div class="img1 imgInformation">INFORMATION img1</div>
    <div class="img2 imgInformation">INFORMATION img2</div>
</div>

Here's an example of how you may use jQuery for this purpose:

jQuery('.clickImage').on('click', function() {
    var imgNumber = jQuery(this).getClass().replace('clickImage', '');
    jQuery('imageTitles .imgTitle').hide(); // hide all image Titles
    jQuery('imageTitles .imgTitle.' + imgNumber).show(); // show title corresponding to the clicked image

    // Repeat the same steps for imgInformation
});

This implementation is a bit rough, but it should guide you on what needs to be done.


EDIT: Updated code snippet as follows:

HTML:

<img src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg" class="img1 clickImage">
<img src="http://media.tumblr.com/tumblr_mcf11pk4nj1ru82ue.jpg" class="img2 clickImage">
<div id="page-wrap">
  <div class="imageTitles">
    <div class="img1 imgTitle">TITLETEXT</div>
    <div class="img2 imgTitle">TITLETEXT</div>
  </div>
  <div class="imageInformations">
    <div class="img1 imgInformation">INFORMATION img1</div>
    <div class="img2 imgInformation">INFORMATION img2</div>
  </div>
</div>

Javascript:

jQuery('.imageTitles .imgTitle').hide(); 
jQuery('.imageInformations .imgInformation').hide();

jQuery('.clickImage').on('click', function () {
  var imgNumber = jQuery(this).attr("class").replace('clickImage', '');
  jQuery('.imageTitles .imgTitle').hide(); // hide all image Titles
  jQuery('.imageTitles .imgTitle.' + imgNumber).show(); // display the relevant title (e.g., img1)    
  jQuery('.imageInformations .imgInformation').hide();
  jQuery('.imageInformations .imgInformation.' + imgNumber).show(); 
});

Answer №2

There are multiple methods to accomplish this task.

1) One approach is to have all information about the images already present on the page in various div elements. For example, the following code snippet demonstrates how this can be done:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.switch').hide();
});
function myInfo(myId)
{
$('.switch').hide();
$('#title'+myId).show();
$('#description'+myId).show();
}
</script>
<table>
<tr>
<td>
<!-- Images -->
<img onclick="return myInfo('1')" id='image1' height="60" width="60" src="http://static3.businessinsider.com/image/52cddfb169beddee2a6c2246/the-29-coolest-us-air-force-images-of-the-year.jpg" alt="Image1"><br/>
<img onclick="return myInfo('2')" id='image1' height="60" width="60" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR6I83EILo3XKIsqZ-0Q5JAEw38xGzsy1g_iKImqjBrMVaOHYb4Zg" alt="Image2">
</td>
<td>
<div id="title1" class="switch"> Image 1</div>
<div id="title2" class="switch"> Image 2</div>
</td>
<td>
<div id="description1" class="switch"> Information about Image 1 </div>
<div id="description2" class="switch"> Information about Image 2 </div>
</td>
</tr>
</table>

2) Another option is using AJAX calls to retrieve image information. In this scenario, only one div for the title and one for the information would suffice. Upon clicking an image, an AJAX call is made to fetch the relevant details and display them in the div element.

These are just two of the many possible approaches to achieving the desired outcome.

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

Aligning figures using the col-sm-4 command in Bootstrap styling

I am struggling to horizontally align three elements using the col-sm-4 function, but unfortunately, it's not working as expected. No matter what I try, the items remain aligned to the left and stacked vertically. The images are all of equal size. Be ...

Is it possible to eliminate the input border within React-Bootstrap?

Struggling to remove the input borders of the Form.Control component in React-Bootstrap. Despite searching for answers, nothing has been able to solve this issue. I've attempted redefining the .css classes "input" and "form-control", trying to set th ...

When the screen size is decreased, one card begins to appear behind another card

In my attempt to create a set of responsive cards using Bootstrap, I have written the following code for the cards: <div class="col-xl-4 col-md-6 col-sm-6 p-2"> <div class="card shadow" style=" ...

The art of smashing elements using flexbox and react flawlessly

I am facing a situation where elements are organized into rows with equal heights. When one element in the row resizes, I want to flex elements in a column layout when the screen size decreases, but rearrange their order slightly. The challenge is that I ...

Database query is failing to return any results

Currently, I am developing a URL shortener system which involves storing data in my database such as an id, url, code, and created. However, I encountered an issue where the code does not return the required code despite checking if the entered url exists. ...

Creating a central navbar brand with a collapsing feature using Bootstrap 4

Struggling with Bootstrap 4 Alpha 6 I'm having trouble getting both the right links and left link to collapse when using Bootstrap. Currently, only the right-hand side link collapses while the left link remains unchanged. <nav id="topNav" class=" ...

Reducing the amount of text displayed on ion-text to a minimum

HTML: <ion-list *ngFor="let message of messages"> <ion-item lines="none" type="button" button="true"> <ion-grid> <ion-row> <ion-col class="message"> <ion-text> ...

"Clicking on an anchor tag triggers the appearance of the ngf-select popup as well

I attempted to create a file dropbox using the ngf-select feature. Within the div, I included an a tag for removing a file. However, whenever I click on the a tag, the ngf-select function also activates unexpectedly. See image here. ...

Showing small previews of images using php

I'm struggling with getting linked images to display. The code I have is currently located in a .php file. Its purpose is to retrieve all images from the directory where the file resides and show them using a "for" loop. However, at the moment, it onl ...

Can you explain the term "the number of cookies from other websites" and suggest ways to modify or improve it?

Lately, I've been grappling with the challenge of incorporating cookies into a JS/HTML program, but for some unknown reason, it just refuses to cooperate. After consulting w3schools' tutorial and reading through the solution provided on How do I ...

1 out of the 3 Submit buttons in the form is malfunctioning and not working properly

Scenario : There is a Bootstrap 4 form with: 1 submit button at the bottom. 2 modals, each with a submit button. Working Submit buttons : The main submit button is functional. The submit button for Add new contractor modal is also working. ...

Having trouble with the jQuery toggle functionality not working as expected

I'm implementing a function where a div should increase in height and opacity when clicked, and then revert back to its original state when clicked again. I used the toggle function for this purpose, but the issue is that the button disappears when th ...

Unlimited image rotation with JQuery

I'm currently working on a project where I have a series of images that are moving left or right using the animate() function. My goal is to create a loop so that when the user clicks "next", the last image transitions to the first position seamlessly ...

Safari Version 8.0.2 experiencing issues with fixed positioning

I am currently working on an angular application and I find myself inside a Twitter Bootstrap modal. My goal is to relocate a button that is located within the body of the modal to the footer of the modal using fixed positioning. This particular button tr ...

Encountering a 503 Error in Loading .js Files from Index.html in a .NET 7.0 Angular Application

I recently came into possession of an Angular project that I am trying to set up in IIS, but I am encountering some unusual behavior. Since I am relatively new to Angular, I ask for your patience as I navigate through this issue. Upon loading the website, ...

The mobile navigation panel fails to open

I have a menu that I would like to toggle hide/show by adjusting its top position. Before logging in, the menu is structured as follows: <div class="lc"> <h1><a href="./"><img src="logo.png" /></a></h1> <a h ...

Ways to perfectly position an image in Bootstrap 4?

As someone who is just starting out with Bootstrap 4, I've noticed that the class "center-block" we used in Bootstrap 3 seems to be missing. Can anyone guide me on how to achieve centering elements in the new version? ...

Firefox is not compatible with CSS animation

I am facing an issue with a select box in "multiple" mode that fetches its data asynchronously. While waiting for the data to load, I want to display a spinner inside the select box. Interestingly, the code works perfectly fine on Chrome, Chromium, and Edg ...

Issue with Bootstrap 5 dropdown menu extending beyond the viewport on the right side

The user dropdown in my code is cut off, even though I'm using Bootstrap 5. I came across an older article on stackoverflow suggesting to add .dropdown-menu-left or .dropdown-menu-right to the </ul>, but that didn't solve the issue for me. ...

What is the best way to center align and add an icon to the header in Ionic?

How can I center align an "ion-ios-arrow-up" icon in the header of my Ionic app, similar to the concept shown below? This is my HTML template: <ion-view cache-view="false" view-title="Historical HPP"> <ion-nav-bar class="nav-title-slide-ios7 ...