What is the best way to display multiple divs in a single location?

I am facing an issue with displaying different text on mouseover for three buttons. I successfully implemented it for one button, but when I added the other two, it stopped working. Here is the code I used for the first button:

Using jQuery-

document.getElementById('description-text').style.display="none";

$("#description-button").on("mouseenter",function()
{
$("#description-text").fadeIn("slow");
});

$("#description-button").on("mouseleave",function()
{
$("#description-text").fadeOut("slow");
});

CSS Code-

#description-text {
    padding: 10px;
    float: left;
    width: 60%;
}

#description-button {
    border-radius: 100%;
    border: 1px solid #aaa;
    width: 10px;
    height: 10px;
    margin-top: 10px;
    position: absolute;
    left: 200px;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

#description-container {
    z-index: 1;
    float: left;
    overflow: hidden;
    width: 70%;
    background: transparent;
}

#description-button:hover {
    background-color: #99daea;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

HTML Markup-

<!--description-->
  <div id="description-container">
    <div id="description-button"></div>
    <div id="description-text">
     this is a description.
    </div><!--tab-text-->
</div><!--description-container-->

The code for the other two buttons is identical, with only the id names and button positioning changed. The text for the first button disappears, but I cannot get it to appear on mouseover. The text for the other buttons does not disappear at all. You can view the issue here.

jqueryhtmlcss

Answer №1

How about implementing this solution? 

document.getElementById('description-text').style.display="none";

$(".description-button").each(function() {
   $(this).on("mouseenter",function() {
        $("#description-text").fadeIn("slow");
   });
});

$(".description-button").each(function() {
   $(this).on("mouseleave",function() {
        $("#description-text").fadeOut("slow");
   });
});
#description-text {
    padding: 10px;
    float: left;
    width: 60%;
}

#description-button1 {
    border-radius: 100%;
    border: 1px solid #aaa;
    width: 10px;
    height: 10px;
    margin-top: 10px;
    position: absolute;
    left: 200px;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
#description-button2 {
    border-radius: 100%;
    border: 1px solid #aaa;
    width: 10px;
    height: 10px;
    margin-top: 10px;
    position: absolute;
    left: 250px;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
#description-button3 {
    border-radius: 100%;
    border: 1px solid #aaa;
    width: 10px;
    height: 10px;
    margin-top: 10px;
    position: absolute;
    left: 300px;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

#description-container {
    z-index: 1;
    float: left;
    overflow: hidden;
    width: 70%;
    background: transparent;
}

.description-button:hover {
    background-color: #99daea;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--description-->
  <div id="description-container">
    <div class="description-button" id="description-button1"></div>
    <div class="description-button" id="description-button2"></div>
    <div class="description-button" id="description-button3"></div>
    <div id="description-text">
     this is a unique description.
    </div><!--tab-text-->
</div><!--description-container-->

Answer №2

Revamp your jquery script to not only display the div, but also populate it with the appropriate content:

document.getElementById('description-text').style.display="none";

$("#description-button").on("mouseenter",function()
{
$("#description-text").html('Updated text from mouseenter 1');
$("#description-text").fadeIn("slow");
});

$("#description-button").on("mouseleave",function()
{
$("#description-text").fadeOut("slow");
});

$("#description-button-2").on("mouseenter",function()
{
$("#description-text").html('Updated text from mouseenter 2');
$("#description-text").fadeIn("slow");
});

$("#description-button-2").on("mouseleave",function()
{
$("#description-text").fadeOut("slow");
});

Answer №3

Perhaps using classes would make it simpler, like so:

$(".button").on("mouseenter", function () {
    $(this).next(".description").fadeIn("slow");
});

$(".button").on("mouseleave", function () {
    $(this).next(".description").fadeOut("slow");
});
.description {
    padding: 10px;
    position: absolute;
    top: 0;
    float: left;
    width: 60%;
    display: none;
}
.button {
    border-radius: 100%;
    border: 1px solid #aaa;
    width: 10px;
    height: 10px;
    margin-top: 10px;
    /*position: absolute;
    left: 200px;*/
    margin-left: 200px;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.container {
    z-index: 1;
    float: left;
    overflow: hidden;
    width: 70%;
    background: transparent;
}
.button:hover {
    background-color: #99daea;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="button"></div>
    <div class="description">this is a</div>
    <div class="button"></div>
    <div class="description">this is b</div>
    <div class="button"></div>
    <div class="description">this is c</div>
</div>

Answer №4

Here is my solution:

document.querySelector('#hide-description').style.display = 'none';

document.querySelectorAll('.toggle-description').forEach(item => {
    item.addEventListener('mouseover', () => {
        document.querySelector('#show-description').textContent = item.nextElementSibling.textContent;
        document.querySelector('#show-description').style.display = 'block';
    });

    item.addEventListener('mouseout', () => {
        document.querySelector('#show-description').style.display = 'none';
    });
});

Check out the complete JSFiddle demo here

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

`Display communications using JQuery and C#`

I am aiming to create a messaging system on a website where users can send messages to each other. Each message will have a button that closes the message and updates the database to mark it as read. My main requirements include: The page should not rel ...

c#jqueryasp.netajax

Padding for the initial element in a carousel display

I am currently working on implementing owl carousel with stage padding. My goal is to use the carousel with loop:false, and have the first item displayed without left padding, while maintaining consistent padding for both items on the left and right after ...

javascriptjqueryhtmlcss

Is there a way to prevent the text box from expanding beyond the small breakpoint?

Help! I'm trying to control the size of a Bootstrap 4 input text box. I need it to stop growing after the small breakpoint, so it doesn't expand to the full width of the screen. ...

cssbootstrap-4

What's causing this element to overlap the previous one (apologies, once more)?

This is the code: <form id="the_form" action="">ev </div> <!-- final pay_block --> <div class="linea"/> <div class="spacer"/> The "linea" element is currently overlapping the buy button because a margin-bottom of 15px has be ...

csshtml

Change the size of window using jQuery

I have implemented a tooltip that can appear in two positions: top and bottom. I am trying to achieve this using jQuery resize function. The issue I am facing is that when the user resizes their browser window to less than 768px, the tooltip should appea ...

javascriptjqueryresize

What is the best way to show an image on the screen once a submit button is clicked?

I have a hidden loader-bar gif that I want to display when the user submits a form. Here is the code: <p class="loadingImg" style="display:none;"><img src="/design/styles/_shared/classic-loader.gif" alt="" /></p> Is there a way to ...

javascriptjqueryhtmlcss

Exploring AngularJS: Retrieving a list of filenames from a specified directory

In the public directory of my application, there is a folder named 'x'. I have the path name to the folder (/path/to/dir/x) but I am unsure of the names of the files within it. How can I retrieve the file names and provide URL links to them in an ...

javascriptjqueryhtmlangularjsmeanjs

Ways to reset the selected option when the user chooses a different option using either Jquery or Vanilla JavaScript

I am currently working on a functionality to clear the select option when a different brand is selected. The issue I am facing is that when I choose another brand, the models from the previous selection are not cleared out. For example, if I select BMW, I ...

javascriptphpjqueryajax

Adjusting the width of an element by modifying its border-collapse property

Is there a way to implement "border-collapse: collapse" without affecting the width of the element? The Issue: Without using the border-collapse property, the right and left borders appear bold because they are adjacent. Using the border-collapse propert ...

htmlcsswidthborder

retrieving information via AJAX call using jQuery

I've been tasked with customizing a book website, and I'm trying to integrate reviews from the Goodreads API. However, my Ajax request isn't returning any data. Here is the code snippet: $.ajax({ 'type': 'GET', & ...

javascriptjqueryjsonajaxhttp

The function .classList.remove() is effective when applied to one element, but fails to work on a different element

I am facing an issue where only one element is getting affected when trying to remove classes from multiple elements if certain email input requirements are met. Can someone help me understand why this is happening? Here is the code snippet: const emailI ...

javascripthtmlcssvalidation

Displaying a subset of categories based on the user's selection

I have been trying to find a solution to automatically display a subcategory select drop-down only when a user selects a category. If no category is selected, the subcategory drop-down should remain hidden. I have searched online tutorials and videos for ...

javascriptphphtmlcategories

Three responsive images neatly arranged within separate div containers

Looking to have these 3 divs align horizontally with responsive images. Having trouble maintaining the layout when setting max-width. Any suggestions? .fl { display: flex; flex-wrap: no-wrap; height: 35%; flex-direction: row; } .pic { width: ...

htmlcss

Are you interested in learning HTML/CSS and joining a class?

When working with HTML, you can use the TOP tag to quickly navigate to the top of a page. This got me thinking - is it possible to create a link on my webpage that will take users directly to a specific class using only HTML and CSS? I'm curious to kn ...

htmlcss

Guide on sending the boolean result returned from controller to view in Spring MVC

I need to pass the boolean value returned by my controller method to the view, where I can display an alert message based on this flag. Here is my controller code: @RequestMapping(value = "/testing", method = RequestMethod.POST) public Boolean testing(@Re ...

javajqueryajaxspring-mvc

Cause a bootstrap column to have overflowing content rather than expanding

I've searched extensively for the solution to my problem, but haven't found a satisfactory answer yet. My goal is to create a location finder with a map on the right and a list on the left. With over 18,000 locations to search through, the list ...

htmlcssbootstrap-4

Transforming the text to be "unreadable"

I find myself in a rather odd predicament where I must display my name and contact details on a webpage. Although I am comfortable with sharing this information, I would prefer that it remain unreadable to robots or other unauthorized sources. Essentially ...

javascripthtmlcssweb

Issues with JSON data retrieved via Ajax requests

Recently, I created a page on WordPress with the intention of submitting a form via AJAX. However, every time the form is submitted, the URL changes to the form handler's URL and instead of using the JSON data to update the current page, it simply dis ...

phpjqueryjsonajax

Ways to implement a custom scrollbar across an entire webpage:

I am trying to implement the Jquery custom content scroller on my webpage to replace the default scrollbar. However, I am facing difficulties in getting it to work properly. You can view my code on Codepen. Although the plugin works fine with smaller blo ...

javascriptjqueryhtmlscrollscrollbar

Replace Original Image with Alternate Image if Image Error Occurs Using jQuery (Bootstrap File Input)

I am currently utilizing the Bootstrap File Input component for file uploads, and it's working splendidly. I have set up the initialPreviewConfig to display the existing image on the server. However, there are instances when there is no file available ...

javascriptjquerybootstrap-4asp-classic