Click to toggle footer position

Having an issue with my footer position on a click event. Using bootstrap css and working with a collapsible element (accordion in bootstrap). When collapsed, it has a class named .accordion-toggle.collapsed, and when expanded, the class is .accordion-toggle.

Trying to slide down the footer when the element is collapsed as it's overlapping the footer. The code being used:

<script>
$(function() { 

    var collapsed = $('.accordion-toggle.collapsed');
    
    $('#links').click(function(){
        if (collapsed){
            $(".footer").css({'margin-top':'320px'});
        }else{
            $(".footer").css({'margin-top':'150px'});
        } 
    });

});
</script>

However, the issue arises when clicking on the collapsible element - the footer slides down, but clicking again when it's not collapsed (class changes to accordion-toggle) doesn't return the footer to its original position of 150px margin top.

Appreciate any help or advice!

Answer №1

Revised: Modify your JavaScript code to the following:

var collapsed;
$('#links').click(function () {
    collapsed = $('#links').hasClass('collapsed');
    if (collapsed) {
        $(".footer").css({'margin':'320px 0px 0px 0px'});
    } else {
        $(".footer").css({'margin':'150px 0px 0px 0px'});
    }
});

Ensure that you update the value of collapsed each time #links is clicked. Additionally, when using jQuery's .css(), it is recommended to use margin instead of margin-top due to potential issues.

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

Using Blob to save CSV file on Safari

Here are the codes I am using to generate a download link for users to download a .csv file from my website. var link = document.createElement("a"); link.id = "csvDwnLink"; window.URL = window.URL || window.webkitURL; var csv = "\ufeff" + CSV, b ...

Attempting to create a table structure with rows and cells dynamically within CoffeeScript utilizing the Google Closure Library

Struggling to embed a table, rows, and columns into an HTML page using coffeeScript and the google closure library. If coffeeScript doesn't work out, I may resort to jQuery or plain javaScript, so any guidance on that front would be much appreciated. ...

The function of $.ajax(...) is not valid - TypeError

Currently, I am working on setting up an AJAX request. Below is the function definition that I am using: function performAJAXRequest(url, dataToSend, callbackFunction) { $.ajax({ type: 'POST', url: url, data: dataToSen ...

What is the best way to eliminate the `<option>` tags nested within a `<select>` element using

Here is the code snippet I am working with: <select> <option>option1</option> <option>option2</option> <option>option3</option> </select> I need to remove one of the options from this select men ...

Navigating cross-domain errors and managing Windows Communication Foundation (WCF)

I encountered an issue while attempting to make a cross-domain jQuery AJAX call to my WCF webservice. Initially, I used the CORS approach but found that the error block was not triggering as expected. However, when I switched to the jsonp approach, it work ...

Executing jQuery/Ajax load on each individual HTML page can be achieved by following a few simple steps

Can anyone help me with a coding issue I'm facing? I have multiple HTML pages where I include JavaScript scripts after the body tag. Initially, everything was working fine but as the project grew, it became messy to manage. To simplify things, I moved ...

Replacing default hover behavior from an external library

Currently, I am utilizing a JS library that comes with a specific widget. Basically, I have the following list (I removed unnecessary DOM code): <li class="disabled"> When I hover over this list item, it turns into: <li class="disabled state-a ...

Troubleshooting issue: Bootstrap mixins not functioning properly due to LESS nesting

Recently I've been experimenting with Bootstrap and LESS, attempting the following: LESS: .class1 { .jumbotron; div { .container(); color: white; } } Here is the relevant part of the HTML code: <div class="class1"> <div> ...

Encountering a problem with displaying error messages in an empty text field

I am facing an issue with displaying error messages when a text field is left blank. I would like a simple message, such as "can't be empty", to appear below the text field in red color when the user clicks the submit button and leaves multiple fields ...

Creating a layout with two divs displayed next to each other using CSS

Just when I thought I had it figured out, my two side-by-side divs are not behaving as intended inside the parent div. Why is the orange "Content" div ending up below the navigation bar? Can anyone spot what I did wrong here? Thank you in advance! CSS: ...

"Encountered a 500 error while making an Ajax request

On my domain, I have two folders containing a PHP file each. I am attempting to send data from one file to the other using an Ajax call. This process worked without any issues when I tested it on localhost. However, when I tried running it on the live serv ...

Ensure that the <div> element expands and takes up all available space on the screen, without exceeding the viewable screen area

Is it possible to size a div element so that it occupies all available remaining space, but if its content exceeds the available space, the overflow is contained within without resizing or changing the height of the element? The element should have a fixed ...

Parent div overflowing due to vertical flex container

In my current project, I am attempting to design a layout with a fixed header and footer along with a dynamic content area that utilizes the remaining vertical space. The content-wrapper contains a lot of data, which may require a scrollbar to navigate. H ...

Using Django to display a list of JSON data dynamically through AJAX requests

I am looking to display a data frame on the front-end in order to create a table within my HTML page. Typically, when using simple rendering (without involving AJAX), I convert it into a list of JSON data and then render it onto the HTML page: my_function ...

Tailwind css has the capability of handling long words seamlessly without causing any breaks

Here is the code snippet that I am working with: <div id="toast-default" class="flex items-center p-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert"> <di ...

What is the best way to display a div when a drop down menu is selected as "No"?

I am currently working on a project involving a form where the address fields are initially hidden. When a user indicates that they have not ordered before by selecting "No" from the drop-down menu, I want the Address field to appear. The HTML for the dro ...

Connecting CSS and JS files in JSP was a bit of a challenge

Just starting out with jsp and using Glassfish server via netbeans. Struggling to link my jsp file with css and javascripts. Below is the structure of my files: Web Pages --Web-Inf --assets --css --style.css --js --jquery.js ...

Insert an icon at the conclusion of a truncated multi-line text without causing a line break

I have a specific requirement where I am looking to present two lines of text, followed by an icon displayed through an img tag. If the text exceeds two lines, I want to display an ellipsis. However, it is crucial that the icon remains inline with the text ...

Creating visually appealing Highcharts.js visualizations for both mobile and desktop devices

Has anyone had success implementing a responsive design with Highcharts to ensure charts look great on both mobile and desktop screens? By default, Highcharts do adjust when resizing the browser window, but sometimes the X-axis can become cluttered by tic ...

Refreshing button labels in Rails utilizing ajax and jQuery

Despite researching numerous other SO inquiries, I am unable to make this function work as desired. Upon clicking "complete," I wish for the button to switch to "un-complete" (for example only). The AJAX action executes successfully, but I struggle with re ...