Bug with the animation of height in Jquery

Unfortunately, I can't share my entire source code here because it's quite lengthy. However, maybe someone can provide some insight into a common issue that may be happening elsewhere.

The problem I'm facing is with a DIV element that has rounded edges. With the help of jQuery, this div toggles between two different heights when clicked.

Interestingly, on the right side of the div, a few pixels are getting chopped off when the div expands or contracts. This results in the appearance of the div becoming narrower and the bottom-right corner losing its rounded shape. Once the animation finishes, the issue disappears.

This distortion during the animation process is quite bothersome as I aim for smooth transitions in my project.

To see the current status of the project, visit:

jqueryhtmlcssanimation

Answer №1

give this a shot

check out the live demo here

HTML

<div class="main_div">
    <span class="div_title">What's your preferred car brand? </span>
    <ul class="inner_list">
        <li>Car1</li>
        <li>Car2</li>
        <li>Car3</li>
    </ul>
</div>

<div class="main_div">
    <span class="div_title">What's your favorite food? </span>
    <ul class="inner_list">
        <li>food1</li>
        <li>food2</li>
        <li>food3</li>
    </ul>
</div>

CSS

.main_div{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px dotted green;
    width:275px;
}

.div_title{
    font-size:15px;
    font-style:italic;
}

jQuery

$(".inner_list").hide();
$(".main_div").click(function(){
    $(".inner_list", this).slideToggle("slow");
});

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

I want to add an LI element to a UL by utilizing jQuery in forms.js

I have several forms on my webpage and I am utilizing jQuery form.js to save each comment that users post. After saving the comment successfully, I want to append it to the UL tag. Although the saving part is functioning properly, I am encountering difficu ...

phpjavascriptjqueryajaxjson

Ensure that all form fields are completed and accurate before the Stripe payment modal is displayed

I've encountered an issue where the stripe payment modal appears before my form validation is complete. I am using the jQuery validation plugin for this purpose. I attempted to integrate the Stripe code within the submitHandler function, but it did no ...

javascriptjqueryvalidationstripe-paymentsformvalidation-plugin

Type the vinculum symbol above a number using HTML

As a Blogger, it is crucial for me to be able to write bars above numbers. Despite numerous searches on Google, there seems to be a lack of articles addressing this specific need. Most of the resources available focus on putting bars above letters or tex ...

html

Issues concerning the customization of error messages in forms are arising

Summing it up, upon form submission, error messages appear beneath each input field with invalid values. Utilizing Zend_Form results in the following markup: <form enctype="application/x-www-form-urlencoded" method="post" action="/auth/register">< ...

htmlcss

Error: Failed to find the location because geolocate has not been defined

I searched extensively online for a solution to my problem without success, so I am reaching out to seek your assistance. I am attempting to utilize the Google Address auto-complete API within an asp.net core framework. In my razor file, I have included: ...

javascriptjquerygoogle-api

Achieving Vertical Alignment in a Bootstrap 4 Image Overlay Card

I am facing a challenge in trying to vertically center a FontAwesome icon within an Image Overlay Card. Despite attempting various methods like using d-flex and justify-content-center, none of them seem to be effective. What could I be overlooking? < ...

htmlcssbootstrap-4overlayvertical-alignment

Retrieving data beyond an HTML form

Starting off my PHP page, there is a form with a save button. Beneath that, I display a list of items fetched from the database. Now, I want users to be able to select the items they desire by ticking them off. The issue I'm facing is that all the inf ...

phphtmlforms

At times, the Kendo UI Tooltip may linger on screen longer than expected, failing to disappear as

I've been experimenting with this issue for quite some time now, but I'm stumped. Whenever I quickly move my mouse cursor over a series of links, occasionally a tooltip will linger on the screen even after the cursor has moved away from the link. ...

javascripthtmlcssajaxkendo-ui

Display various JavaScript function outputs in an HTML table for convenient tracking

Thanks to a helpful user on this platform, I was able to capture data from a JavaScript function and display it in an html table. However, I now have another query. How can I execute the function multiple times during page load and record the results in ...

javascripthtmlfunctionhtml-tablegetelementbyid

Getting the user's language in PhoneGap can be done in a variety of ways

I attempted to retrieve the language value of the device using the globalization plugin. I followed all installation procedures, read through the documentation, and searched for answers on this platform, but unfortunately, none of them provided the solutio ...

androidjqueryhtmlcordovaphonegap-plugins

What steps can be taken to implement CSS rules on an HTML element with ExtJS?

In my ExtJS 4 project, I am working on drawing an image inside a panel and slider field. My goal is to adjust the opacity of the image based on the value of the slider field. I understand that I can use CSS rules like opacity and filter:alpha(opacity=); t ...

cssextjs4opacity

Steps to calculate the total number of rows in a datatable

I have implemented a datatable in my project, and I need to find out the total number of rows in the table when it is loaded. Here's the snippet of code I am currently using: $(document).ready( function() { $('#jobSearchResultTable').data ...

javascriptjquerydatatable

Guide on utilizing the h function in Vue3 for seamless binding and passing of properties and events from parent to child components

Utilizing Vue3 and naive ui for front-end development has been a challenge for me as I primarily focus on back-end development and lack expertise in front-end technologies. To enhance user interaction, I incorporated naive ui’s BasicTable along with an ...

javascripthtmltypescriptvue.jsvuejs3

What are some ways to implement webkit-line-clamp on a website?

I'm trying to shorten my paragraph using the following CSS code: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; However, the issue is that it condenses everything into one line. I actually want the text to display on 3 lines before t ...

htmlcsswordpressweb

Ways to include additional hyperlinks in my navigation bar

I am seeking ways to enhance my CSS menu so that there is no lag when new links are added. I aim to include 8 additional links if possible. Is there a way to prevent this delay and ensure that the links align correctly? nav { display: inline-block; ...

htmlcss

Tips for creating responsive scrollable columns in an HTML table with Bootstrap

I'm not a professional web designer. I attempted to create a web layout with scrollable columns containing data in anchor tags that are loaded dynamically. To achieve this, I created an HTML table structure along with a stylesheet. Here is the source ...

htmlcssangularjstwitter-bootstrap

Issue with background/hero video not adjusting its size

I've been experimenting with creating a page that features a video as the background, but no matter what I try, the video never seems to resize properly. The image below shows how it looks: image in question body { margin: 0; } .hero-se ...

htmlcss

One way to submit a value form in an iframe is by double clicking

I am looking to submit a value form in a frame that functions as described below: index.php <form action="iframe1.php" method="post" target="iframe1"> <input type="text" name="lala"> <input type="submit"> </form> <iframe name= ...

javascriptphpjqueryformsiframe

A guide on transferring a PHP array to an AJAX function

My goal is to pass the PHP array values from a specific form ID to my AJAX form. While everything seems to be working fine, I'm encountering an issue where only the (1) ID number gets displayed. In this piece of code for my form, I am passing the ...

phpjqueryajax

Using CSS with absolute positioning and dynamic height

There are 4 consecutive <div> tags in absolute position, aligned using top and left. The third div tag has dynamic content, causing its height to adjust based on the text within it. However, since the top and left properties are set for all divs, th ...

htmlcss