``There seems to be an issue with implementing the SlideDown feature in JavaScript

I am having an issue with a code where the expected behavior is to slide down a div when a person hovers over text, but it's not working. Can someone please review and identify the cause of this problem?

<script type="text/javascript" src="/js/jquery-1.9.1.min.js" ></script>
<div class="good_main">
<div class="more_save_box">
        <div class="top_wholesaleInquiry_button_20161213 more_save">
            Wholesale Inquiry
        </div>
        <div class="more_save_tips" style="display: none;">
            <span class="arrow_a"><i><i></i></i></span>
            <h3>Bulk Buy Discounts</h3>
            Order 3 or more and enjoy the savings. Bulk prices will be shown in the shopping cart.
            <table cellspacing="0" cellpadding="0" width="100%" border="1">
                <tbody><tr>
                    <th>Qty (unit)</th>
                    <th>1</th>
                    <th>3</th>
                    <th>10</th>
                    <th>30</th>
                    <th>100</th>
                </tr>
                <tr class="has">
                    <td>Price <span>US$</span></td>
                <td>12.99</td><td>12.53</td><td>12.36</td><td>12.21</td><td>12.04</td></tr>
            </tbody></table>
            <span class="top_wholesaleInquiry_button_20161213" id="more_save_tips_contact">Looking for more wholesale prices, <a rel="nofollow" target="_blank" href="/Contact-Us_hi558?products_id=975808">Wholesale Inquiry</a></span>

        </div>
    </div>
  </div>
  <script type="text/javascript">
$(".good_main .more_save_box").hover(
    function(){
        $(".good_main .more_save_tips").stop().slideDown(); 
    },
    function(){
        $(".good_main .more_save_tips").hide(); 
    });
</script>
javascriptjquerycss

Answer №1

Make sure to enclose your code within a document ready statement and utilize mouseover/mouseout events for functionality

  $(function(){
    $(".good_main .more_save_box").mouseover(function(){
            $(".good_main .more_save_tips").stop().slideDown(); 
        })
        .mouseout(function(){
            $(".good_main .more_save_tips").hide(); 
        });
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="good_main">
  <div class="more_save_box">
    <div class="top_wholesaleInquiry_button_20161213 more_save">
      Wholesale Inquiry
    </div>
    <div class="more_save_tips" style="display: none;">
      <span class="arrow_a"><i><i></i></i></span>
      <h3>Bulk Buy Discounts</h3>
      Order 3 or more and enjoy the savings. Bulk prices will be shown in the shopping cart.
      <table cellspacing="0" cellpadding="0" width="100%" border="1">
        <tbody>
          <tr>
            <th>Qty (unit)</th>
            <th>1</th>
            <th>3</th>
            <th>10</th>
            <th>30</th>
            <th>100</th>
          </tr>
          <tr class="has">
            <td>Price <span>US$</span></td>
            <td>12.99</td>
            <td>12.53</td>
            <td>12.36</td>
            <td>12.21</td>
            <td>12.04</td>
          </tr>
        </tbody>
      </table>
      <span class="top_wholesaleInquiry_button_20161213" id="more_save_tips_contact">Looking for more wholesale prices, <a rel="nofollow" target="_blank" href="/Contact-Us_hi558?products_id=975808">Wholesale Inquiry</a></span>

    </div>
  </div>
</div>

Answer №2

To start, make sure to encapsulate your jQuery script within the document.ready function, as demonstrated below:

$(document).ready(function(){
  $(".top_section .expand_box").hover(
    function(){
        $(".top_section .expand_info").stop().slideDown(); 
    },
    function(){
        $(".top_section .expand_info").hide(); 
    });
});

Answer №3

For your code to function properly, make sure the jQuery code is loaded when the dom is in a ready state.

$(document).ready(function(){
    $(".good_main .more_save_box").hover(
    function(){
        $(".good_main .more_save_tips").stop().slideDown(); 
    },
    function(){
        $(".good_main .more_save_tips").hide(); 
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="good_main">
<div class="more_save_box">
        <div class="top_wholesaleInquiry_button_20161213 more_save">
            Wholesale Inquiry
        </div>
        <div class="more_save_tips" style="display: none;">
            <span class="arrow_a"><i><i></i></i></span>
            <h3>Bulk Buy Discounts</h3>
            Order 3 or more and enjoy the savings. Bulk prices will be shown in the shopping cart.
            <table cellspacing="0" cellpadding="0" width="100%" border="1">
                <tbody><tr>
                    <th>Qty (unit)</th>
                    <th>1</th>
                    <th>3</th>
                    <th>10</th>
                    <th>30</th>
                    <th>100</th>
                </tr>
                <tr class="has">
                    <td>Price <span>US$</span></td>
                <td>12.99</td><td>12.53</td><td>12.36</td><td>12.21</td><td>12.04</td></tr>
            </tbody></table>
            <span class="top_wholesaleInquiry_button_20161213" id="more_save_tips_contact">Looking for more wholesale prices, <a rel="nofollow" target="_blank" href="/Contact-Us_hi558?products_id=975808">Wholesale Inquiry</a></span>

        </div>
    </div>
  </div>

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

"Ensuring that every" within handlebars js

I have been exploring handlebars.js (hbs) and although I haven't mastered it yet, I am curious to know if there is an equivalent to the following code: {{#if all source}} If not, how can I create a similar functionality using handlebars.js? ...

javascriptnode.jsexpresshandlebars.js

The ">" CSS child selector does not seem to be functioning correctly with specific properties

While experimenting with applying CSS properties to direct child elements of a parent element using ">", I noticed that it works smoothly with certain properties like borders, but not so much with font-related properties such as color and font-weight. ...

htmlcsscss-selectors

Extracting data from websites: How to gather information from dynamic HTML elements

On the website I am exploring, there is a dynamic graph with descriptions below it that keep changing. My goal is to extract all these trajectory descriptions. The HTML code snippet related to the description area looks like this: <div class="trajDesc ...

javascriptjqueryhtmlcssselenium

Discover the secrets to acquiring cookies within a Next.js environment

I am currently working with Next.js and attempting to retrieve a cookie value. Below is the code I have written: import cookie from "js-cookie"; export default function Home({ token }) { return ( <div className="flex flex-col items ...

javascriptreactjscookiesnext.js

Playing a game of rock, paper, scissors with two players using JavaScript

Hello! I am a beginner in JavaScript and I am trying to create a simple rock, paper, scissors game. However, when I run the code, I receive two prompt messages and an error saying 'TypeError: playerOneChoice is not a function'. What mistake did I ...

javascript

Select2 Bootstrap - Preselecting Options

I am currently utilizing Bootstrap Multiselect but I am encountering some difficulties setting the default value for the multiselect as per the documentation provided. Inside a function, I have tried the following: $("#selector").multiselect("select", ["V ...

jquerytwitter-bootstrap

When JSF renders bootstrap buttons, they appear without any horizontal padding

There is a strange behavior that I cannot explain... I am working with a series of buttons: <h:commandButton value="foo" actionListener="#{foo.foo}" styleClass="btn btn-danger"> <f:ajax render=":form"></f:ajax> </h:co ...

htmlcsstwitter-bootstrapjsftwitter-bootstrap-3

How can I modify the color of a div when a validation error occurs?

I have recently completed a contact form with validation using the constraint validation api. Although the files are functioning as intended, I am curious if there is a method to make the error boxes turn red when an error occurs and white (or hidden) when ...

javascripthtmlcss

Identifying fluctuations in unprocessed data

Currently in the process of developing a web application that serves as a dashboard for monitoring storage tank levels. It gathers data from various sensors inside tanks and saves this information in a database. The tool is created using express / node.js. ...

javascriptnode.jsexpressdata-analysis

Is there a simple method to submit to a URL without relying on ajax?

When it comes to using jQuery, the $.ajax() function is typically used for POST requests to a URL. However, in my particular situation, I am unable to use this function. I need the client to send a POST request to a URL and have the server redirect the use ...

javascriptjquery

bitcoinjs-lib for generating raw transactions in Node.js

var bitcoin = require('bitcoinjs-lib'); var rp = require('request-promise'); var data = Buffer.from('Hello World', 'utf8'); var testnet = bitcoin.networks.testnet; var privateKey = 'p2pkh'; var SourceAddre ...

javascriptnode.jsbitcoinjs-lib

Showcasing articles in an XML feed according to specific keywords found in the headline

I'm currently working on designing a website for a client and I want to minimize my involvement in its maintenance. I am considering using RSS feeds to automate the process by having content posted on Blogger and then feeding it to the site. However, ...

javascripthtmlwebrssfeed

Issue with adding object to array using forEach() function

As I navigate my way through an express route, I am puzzled as to why the "purchasedCards" array turns out empty after going through these database calls. Despite successfully gathering all the necessary information from various DB Queries and placing it i ...

javascriptsqlpostgresqlexpress

Guidelines for calculating the CRC of binary data using JQuery, javascript, and HTML5

Can you please assist me with the following issue? Issue: I am currently reading file content using the HTML5 FileReaderAPI's ReadAsArrayBuffer function. After storing this buffer in a variable, I now need to compute the CRC (Cyclic Redundancy Check) ...

javascriptjqueryhtml

Click Action on CanJS Table

I am currently developing a canJS application and have been able to successfully handle the click event for an HTML table using the code below. 'table td click':function(el,event){ console.log('clicked ',el.text()); } ...

javascriptcanjscanjs-control

Creating a function that writes to a file by utilizing the data input from

After running the provided code snippet, it successfully works in a standalone project. However, I am interested in making modifications to replace the variable "sample_text" with an output that is displayed in the terminal instead of being hardcoded int ...

javascriptnode.jsselenium-webdriverwritefile

My goal is to dynamically adjust the height of this section based on its content

I experimented with this code snippet: <section class="unique"> <div class="this d-flex pt-5"> <div class="leftside2 w-50 h-100"> <img src="images/twowomen.jpg" alt=" ...

htmlcssbootstrap-4

Building a stack of DIVs, some with fixed heights and others without, potentially using only CSS

Hello everyone! I am having trouble deciding on the best approach to achieve a layout like the one below: +------------------------------------------------------------+ | div 0 , varying height +---------------------------------------------------------- ...

csshtmllayoutfixed

Refreshing div with updated form/content using jQuery and AJAX

Is it possible to use jQuery/AJAX functions to replace a form (or any content) with another form when a button is clicked, without reloading the page? Essentially creating a multi-part form dynamically. Can I achieve this with the following code snippet? ...

javascriptjqueryajax

Determining the Similarity of jQuery Selectors' Selected Elements

I'm looking for a way to programmatically identify if two jQuery selectors have chosen the exact same element. My goal is to iterate over multiple divs and exclude one of them. This is what I envision: var $rows, $row, $row_to_exclude; $rows ...

javascriptjquery