Bootstrap 4 collapse is experiencing some issues as it is not collapsing smoothly. It seems to pause halfway before

Why is this collapse stopping in half before collapsing completely?

I have 5 divs collapsing at once, could that be the issue? The example on W3 schools works fine... Should I consider changing the collapse to a panel instead?

Visit W3 Schools for more information

The code I used from there seems to work fine.

$(document).ready(function() {
    $(".logo-area").click(function() {
        $(this).toggleClass("new-p");
    });
});
#collapseOne {
    width: 100%;
    padding-top: 7%;
    padding-bottom: 5%;
    z-index: 200;
    position: fixed;
    background-color: #F4F4F4;
    color: black;
    text-align: center;
}

#collapseOne div {
    display: inline-block;
    margin: 3%;
}

#collapseOne p {
    font-weight: bold;
    font-size: 36px;
    color: black;
}

#collapseOne span {
    color: black;
}

#collapseOne hr {
    width: 50%;
    background-color: black;
}

.new-p {
    color: black;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="logo-area" id="fixedButton" for="collapseOne" data-toggle="collapse"
     href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    <input type="image" src="images/creabaco-log2.png">
    <p class="logo-p">crebaco</p>
</div>

<div class="collapse" id="collapseOne">
    <div>
        <a href="index.html">
        <p>Crebaco.</p>
        <span>Overview.</span>
        <hr>
        </a>
    </div>

    <div>
        <a href="test.html">
        <p>Services.</p>
        <span>What we do.</span>
        <hr>
        </a>
    </div>

    <div>
        <a href="about.html">
        <p>About.</p>
        <span>Who we are.</span>
        <hr>
        </a>
    </div>

</div>

Answer №1

The smooth effect you are experiencing is due to the padding-top: 7%; or padding-bottom: 5%; applied to #collapseOne.

To remove this effect, it is recommended to delete this CSS code.

If you need space between your content, you can add the following CSS in the child id:

#collapseOne div{padding: 4% 0;}

I hope this information is helpful for you.

Feel free to reach out if you need further clarification.

$(document).ready(function() {
    $(".logo-area").click(function() {
        $(this).toggleClass("new-p");
    });
});
#collapseOne {
    width: 100%;
    z-index: 200;
    position: fixed;
    background-color: #F4F4F4;
    color: black;
    text-align: center;
}

#collapseOne div {
    display: inline-block;
    margin: 3%;
    padding: 4% 0;
}

#collapseOne p {
    font-weight: bold;
    font-size: 36px;
    color: black;
}

#collapseOne span {
    color: black;
}

#collapseOne hr {
    width: 50%;
    background-color: black;
}

.new-p {
    color: black;
} 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="logo-area" id="fixedButton" for="collapseOne" data-toggle="collapse"
     href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    <input type="image" src="images/creabaco-log2.png">
    <p class="logo-p">crebaco</p>
</div>

<div class="collapse" id="collapseOne">
    <div>
        <a href="index.html">
        <p>Crebaco.</p>
        <span>Overview.</span>
        <hr>
        </a>
    </div>

    <div>
        <a href="test.html">
        <p>Services.</p>
        <span>What we do.</span>
        <hr>
        </a>
    </div>

    <div>
        <a href="about.html">
        <p>About.</p>
        <span>Who we are.</span>
        <hr>
        </a>
    </div>

</div>

Answer №2

To improve your animation, consider adding padding to the child classes of #collapseOne instead of directly to the id itself. This adjustment can help create a smoother transition in your design.

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

What are some ways to detect if JavaScript is enabled on the client side?

In the process of creating a web application, I have structured my code to dynamically generate JavaScript functions using PHP. However, it has come to my attention that if JavaScript is disabled on the client side, my application will not function as in ...

JSP staying away from servlets

On my website, I have a .jsp page with a form like this: <form name="myForm" method="post" action="LoginServlet"> <div class="form-group"> <label for="exampleXPID">userid</label> <div class="input-gr ...

React Three Fiber encountered an unexpected JSON token 'c' at position 3

I am encountering an issue while trying to load a .glb file using react-three-fiber. The error I'm receiving is as follows: Error Unexpected token c in JSON at position 3 I can't seem to figure out what mistake I am making - it seems that the co ...

``Why is it that the JavaScript code is unable to find the maximum or minimum sum? Let's

function calculateMinMaxSums(arr) { // Custom code implementation let max = Math.max(...arr); let min = Math.min(...arr); let minsum = 0; let maxsum = 0; for (let x in arr) { if (arr[x] != max) { minsum += arr[x]; }; if (arr[x ...

Trouble with loading images on hbs/nodejs

I'm currently working on a web application using NodeJs and express-handlebars. However, I am facing an issue with images not displaying correctly on the HTML page that is being rendered using handlebars. Here is the structure of my app: The root fo ...

Selecting the quartile value for every individual data point

I am currently graphing the sentiment values of tweets over a span of 10 years. The CSV file contains three columns as outlined below. Successfully, I managed to plot each value by date. However, upon attempting to create an area graph, I encountered an i ...

Angular Testing - issue with promise returning unexpected results

I'm having trouble with populating vm.chartData in my HomeCtrl. Even though I've mocked data to it in the beforeEach() function, when I console.log(scope.vm.chartData), it returns undefined. However, other scope variables like graphLoading are pr ...

Is it possible to utilize FTP to update images on a ColdFusion website?

Recently, I made some minor changes to my website by updating the logo and background image for a button. All I did was replace the existing images with new ones of the same name and size, without modifying any other files. After making these changes, I n ...

Is it necessary to save the details of a specific position in local storage when sliding?

Currently, I am in the process of replicating a webpage design from . I have written the code for the functionality where images and phrases change on every slide. There are three different phrases and images that are being displayed, and my goal is to sto ...

What is the process for extracting a nested document from an array of documents in mongodb?

I am currently facing a challenge in my project where I need to remove a nested objects array within a document. The specific scenario involves searching for the days on which an event will be held, based on its event ID. const { eventid, typesOfTicketId ...

NuxtJS - Google Auth: ExpiredAuthSessionError: The authentication session has expired because both the token and refresh token have expired. Please try your request

I've been using nuxtjs for some time now. Everything related to authentication was working smoothly until my last update. However, after updating the nuxt.config.js file and moving the axios plugin from the plugins array to the auth config object, an ...

Incorporating HTML5 Video Using an AJAX Request

I am attempting to fetch a video using an ajax query, but it seems that the video player control buttons are missing. Here is the code I am using: $.ajax({ context: document.body, url: "/?get=json&act=video", type: "get", success: fu ...

Unable to maintain constant slide down feature for jQuery dropdown

I am currently working on a website for a client and I am still learning the ropes of jQuery. The website required a dropdown menu to display links to galleries in a list format instead of having them all on the navigation bar. However, I encountered an is ...

Guide on incorporating amcharts into a Nuxt application

I am attempting to integrate amCharts into my Nuxt project. Within the svg-map.vue component, I have added the following code snippet: head() { return { script: [ { src: 'js/amcharts/core.js' } ] }; }, However, I e ...

ngFor filter for converting strings to lowercase

In my application, I am implementing a pipes example that converts uppercase strings to lowercase. For example, 'Activities' becomes 'activities'. The data is in Array format, and I am using this filter with *ngFor. However, I am encoun ...

Achieve a main-menu container with a full width dropdown using Bootstrap 4

I want the dropdown to start from the initial position for all menus and maintain a width of 600px. Even if I attempt to open the dropdown for "Main Menu 2" or "Main Menu 3" or "Main Menu 4", the dropdown should always start from the position of "Main Men ...

Sending an incorrect value to the data variable

Apologies for my limited proficiency in English, Hello, I am new to Vue and struggling with an issue that I can't seem to resolve. I am fetching art data from an API (a simple list of dictionaries), and then creating a multi-array structure (list of l ...

Attempting to navigate a tutorial on discord.js, I encountered an issue labeled as "Unknown application" that disrupted my progress

I attempted a tutorial for discord.js, but encountered an error message saying "DiscordAPIError[10002]: Unknown Application." Even though I checked my clientID and applicationID and they seem to be correct! You can find the tutorial here. Here is the co ...

Rotating the camera in a 2D space using three.js

Within my app, I have implemented a camera: camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 1; camera.position.y = -5; camera.rotateOnAxis(new THREE.Vector3(1, 0, 0), degInRad(90)); camera ...

Showing a pop-up on a click of a dynamically created table row, showcasing information specific to that row

I am facing a challenge with my dynamically generated table that is based on the JSON response from an AJAX call. What I am trying to achieve is to display additional data in a modal when a table row is clicked. This would be simple if the data was hard co ...