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

Aligning inline form controls with Bootstrap and Syncfusion widgets

I'm facing a challenge aligning the Syncfusion JavaScript widget - a dropdownlist - to be displayed inline with the label. I am using Bootstrap 3. I haven't been successful in achieving a nice alignment, meaning getting the middle of the label p ...

htmlcsstwitter-bootstrapsyncfusion

Tips on updating a specific value within an element stored in an array

I'm currently in the process of setting up a table where each row contains unique values. Using a for loop, I am able to generate these rows and store them in an array. Now, my question arises when I consider modifying a particular value with the id " ...

javascriptjqueryhtmlcss

The jQuery code runs successfully on jsFiddle, but fails to execute on my website

I've created a login script that generates a username by combining the first and last names (on blur), eliminating spaces, and removing special characters. While everything functions correctly in jsFiddle, I encounter an error on my website indicatin ...

jquery

Create a dynamic onClick event script and integrate it into Google Optimize

I need to incorporate a button element into my website using Google Optimize for an experiment. This button needs to trigger a specific script depending on the variation of the experiment. I have attempted two different methods: <button id="my-button" ...

javascripthtmldynamic-htmldynamic-script-loadinggoogle-optimize

How can I troubleshoot an image not appearing in Bootstrap within a Laravel Blade file while using PHPStorm?

Forgive me if this sounds like a silly question: I attempted to use the following src attribute in an img tag to show an image on a website created with Bootstrap, while using phpstorm with a laravel blade file: src="C:\Users\MAHE\Pictures&b ...

htmlcsstwitter-bootstraplaravel-5laravel-blade

Troubleshooting: Custom JQuery function not functioning as expected

I am currently facing an issue with the jQuery in my website while trying to implement a portfolio element. It seems to be related to the changePortfolio() function, but I am unsure of how to resolve it. $('.projects a[href^="#"]').on('clic ...

javascriptjqueryfunction

Attempting to reveal the gridview that has been hidden due to a server-side command

I am attempting to make the gridview visible that is hidden by the server side on page load method in C#. protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { this.BindDummyRow(); } ...

javac#jqueryasp.netajax

The JSON output displayed my HTML `<br />` as unicode `u003cbr /u003e`, resulting in the `<br />` being shown as text instead of creating a line break

Utilizing ASP.net MVC3, I have retrieved a model in Json format using Jquery.AJAX and am passing it into a Jquery template for rendering. For instance, the Json returned by the server is {"Key":2,"Content":"I'm Jason\u003cbr /\u003ehow are ...

jqueryhtmlasp.net-mvc-3encodingdecoding

Retrieve the selected value from a radio button

I am attempting to display the chosen value in an input field when a radio button is selected. However, the functionality seems to be broken when I include bootstrap.min.js. You can find the code on JSFiddle. $('input:radio').click(function() ...

javascriptjquerytwitter-bootstrap

Ways to align grid components at the center in MUI frameworks?

I am brand new to using MUI and currently experimenting with the grid functionality. <Grid className={classes.grid} container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}> {data.data.map((item, index) => { ...

cssmaterial-ui

Troubleshooting PHP ReadFile Problems Caused by Spaces

Currently facing a PHP issue that has me stuck. I have a download.php file which grants secure access to downloads stored in a private server folder, one level above httpd. The code snippet is as follows: $Document = new Documents($DID); ...

phpjqueryapachejquery-file-uploadblueimp

Web server experiencing issues with loading scripts and CSS files

After successfully building my project using CodeIgniter on localhost, I encountered an issue when trying to run it on a webhost. The site was functional but the design elements such as scripts and stylesheets were not loading properly. Before uploading t ...

javascriptphpcsscodeigniter

Other elements are unable to conceal Material UI InputBase

Displayed below is a navigation bar that sticks to the top, followed by rows of InputBase components from material-ui. Despite setting the background color of the nav bar to white, the input always appears above the nav. This strange behavior stopped when ...

javascripthtmlcssreactjsmaterial-ui

Striving to implement a dynamic expand and collapse animation feature for a card in ReactJS

I'm attempting to create an expand and collapse animation effect on a card without relying on bootstrap or any external libraries. I have tried adding a transition property but it doesn't seem to work when the button is clicked. Here is the comp ...

cssreactjs

Guide on extracting the ID within a for loop and incorporating it into a Vue.js function

In order to make an API request, I need to retrieve the id. However, whenever I try to include <a v-on:click="showRecipe({{inf.Id}})">Recipe</a> in my code, the entire page crashes. Removing this line resolves the issue. How can I pass the id ...

javascripthtmlvue.jsvuejs2vue-component

Difficulties encountered when trying to send emails on iPhone with HTML formatting and attachments

I'm attempting to send a JPG attachment along with a formatted HTML message using [picker setMessageBody:emailBody isHTML:YES]; as recommended by several forum posts. However, what I've noticed is that the resulting email's content varies d ...

iphonehtmlemailattachment

Align the text to the center within the Paper component using React and Material-ui

I've been struggling to center text inside a paper component in Material UI, and nothing seems to be working. I attempted using display:flex in the parent component with align-items:center in the child component. I also tried adding padding:5px for eq ...

cssreactjsmaterial-ui

How to Determine If a String Represents an HTML Tag Using jQuery

Checking if a string is an HTML tag can be tricky. I've tried various methods found on Google, but none have been successful so far: var v = $(string).html() ? 1 : 0; --or---------------------------------------------- var htmlExpr = new RegExp("/^( ...

javascriptjqueryhtml

Refresh the PartialView only after clicking submit

I am struggling with updating only the contents of my partial view after clicking an input type="submit button. My goal is to refresh just the partial view and update it with the updated model from the controller code, without refreshing the entire page. S ...

javascriptjqueryasp.net-mvc-4razor

How to reference global Sass variables in a Sass module

My preferred method involves utilizing a global .scss file that houses all the foundational styles, such as primary color selections. Following this, I create separate modules for each React Component to maintain organization and reduce the need for import ...

csssassnext.js