``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

Having trouble with .animate() function?

Struggling to animate the position of my background image $(function() { $('#nav1').bind('click',function(event){ $('ul.nav').stop().animate({backgroundPosition: 'right top'}, 1000); }); $(function() { ...

javascriptjqueryhtmljquery-animate

jQuery checkbox toggles multiple divs instead of targeting specific ones

I have set up my page to display divs containing posts using a specific format. The divs are structured as follows (replacing # with the postID from my database): <div id="post_#> <div id="post_#_inside"> <div id="like_#"> ...

ajaxhtmltogglejquery

Show errors related to parsley within a bootstrap tooltip

I am currently working with Parsley 2.0.0-rc5 and I would like to display the error messages using a Bootstrap tooltip. The issue I am facing is that the "parsley:field:error" event fires before the error message is displayed in the error container, maki ...

javascriptjquerytwitter-bootstrapjquery-pluginsparsley.js

The Power of the CSS Universal Selector and Specificity

Currently exploring the puzzling scenario where .x seems to have higher specificity than *.x, despite expectations. Shouldn't *.x technically have a specificity of 0-0-1-1 (1 class, 1 tag) while .x is just one class with specificity 0-0-1-0? Let&apo ...

csscss-specificity

Formatting won't assist in aligning Facebook button

I am currently working on a page that includes a div with a Facebook recommend button. In order to style the Facebook code, I enclosed it with this formatting: <div style="align:center"> <div id="fb-root"></div> <script src=" ...

htmlcss

Is it possible to dynamically change the color of a box shadow using an event handler?

I'm currently in the process of developing an application that consists of six distinct topics organized within a flexbox structure, complete with a box-shadow effect. My objective is to dynamically alter the color of the box-shadow through an event ...

javascriptjqueryhtmlcss

An error popped up as I attempted to load an existing design within the vue-email-editor

https://i.stack.imgur.com/0ObU5.png Check out the code snippet below for the function I have created: editorLoaded() { this.$refs.emailEditor.editor.loadDesign(this.emailJson); console.log('editorLoaded'); }, ...

javascriptvue.js

Tips for stopping a flex:1 div from expanding to accommodate its abundant content

I'm facing a situation where I need to create two columns, one fixed at 150px and the other filling up the remaining space with scroll functionality for overflow content. Despite trying to use flexbox for this layout, the second column keeps expanding ...

htmlcssflexbox

Guide on how to vertically and horizontally center a heading text with dash-bootstrap

I have implemented the Bootstrap dash layout for my web application, but I want to place the text in the red area instead of at the top of the page. Can anyone guide me on how to achieve this? https://i.sstatic.net/RcNhy.png I have already tried using "a ...

cssplotly-dashplotly-python

In the event that the API server is offline, what is the most effective way to notify users that the server is not accessible on the client-side?

I am working on a project where my website interacts with an API hosted on a different server. The website makes API calls and displays the data in a table. However, I want to implement a way to alert the user client-side using JavaScript if the API server ...

javascriptajaxerror-handlingserver

Error Encountered - Node.js application experiencing issues in passport login functionality

I'm in the process of developing a login application using nodejs and incorporating passport js for authentication. The app is connected to a local MySql database and utilizes sequelize as its ORM library. Within my user model, I've implemented ...

javascriptnode.jspassport.js

jQuery plugin modifies keypress events

I have integrated the Jquery ImgAreaSelector plugin into my website. Within my site, I have implemented several keypress triggers using jquery. For example: $(document).bind('keypress', 'S', function(){ alert("You have pressed S key ...

javascriptjqueryhtml

When hovering the mouse over, the text fails to appear

Is there something wrong with my overlay on this image? It darkens when I mouse over, but the text I want to display does not show up. Any ideas? http://jsfiddle.net/cryycw3n/ HTML <div class="square"> <div class="info"> <h2&g ...

htmlcss

Using Jasmine to simulate an if/else statement in Angular/Typescript unit testing

After making a minor change to an existing function, it has been flagged as new code during our quality checks. This means I need to create a unit test specifically for the new 4 lines of code. The challenge is that there was never a unit test in place for ...

javascriptangulartypescriptunit-testingkarma-jasmine

Activate unresponsive state when clicked

Struggling to implement a mobile responsive menu, my primary issue is the navigation buttons not toggling upon clicking. Here's what I have so far in terms of HTML and JQuery: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery. ...

htmlcssmenunavigationhamburger-menu

Enhance your CSS link in Yii framework 2.0 by incorporating media printing capabilities

While working on Yii framework 2.0, I typically include a CSS file by adding the following code snippet to assets/AppAsset.php: public $css = [ 'css/style.css', ]; Upon inspecting the element in the web browser, I notice the following code ...

cssattributesmediayii2

Using Nodes to Populate an Array with References to Objects

How can I populate the courses of a Student in StudentSchema with courses (Object_id) from Course in CourseSchema that belong to the same major as the student? let StudentSchema = new Schema({ _id: new Schema.Types.ObjectId, emplId: { type: ...

javascriptnode.jsmongodbmongoosemongodb-query

Updating React component props

After updating the state in a component and passing the new props into the child, I noticed that the child is not updating correctly and the defaultValue of the input is not changing. My initial thought was that using this.props could be the issue, so I sw ...

javascriptreactjsreact-props

"Implementing jquery autocomplete feature with the ability to fetch data from

Currently, I am utilizing jquery's ajax functionality to retrieve data from an external php file. The retrieved data is then intended for use in the autocomplete feature. However, instead of displaying individual values from the array in the php file ...

phpjqueryjquery-autocomplete

Function for masking phone numbers is adding additional "x's" to the input field

My phone number formatting script is supposed to add dashes after the third and sixth characters, as well as insert an "x" after the 10th character for extensions. However, it is adding extra "x's" after the 12th character, resulting in the incorrect ...

javascriptjqueryhtmlmasking