Ensure the website is able to adjust its size when the top banner increases in size

On my website, there is a top banner containing contact information that expands when clicked. However, the expanded div overlaps the site content. Is there a way to make the site scale with the expanded div so that the top of the site starts below it?

I tried using position: relative on the div, but it didn't work as expected.

Here is the code I am using:

HTML:

<div class="bannertop">
    <div id="cont">
        <a href="#" id="buttonphone"><i class="fa fa-chevron-down telefoontje" aria-hidden="true"></i></a>
        <ul class="bannertopcontact">
            <li class="banneritem">
                <a style="color:#fff;" href="tel:+2523532523532"><i class="fa fa-phone" aria-hidden="true"></i>352353252</a>
            </li>
             <li class="banneritem">
                <a style="color:#fff;" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="731a1d151c33041611001a07165d1d1f">[email protected]</a>"><i class="fa fa-envelope" aria-hidden="true"></i> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f262129200f382a2d3c263b2a612123">[email protected]</a></a>
            </li>
              <li class="banneritem">
                <a style="color:#fff;" href="contact.php"><i class="fa fa-external-link" aria-hidden="true"></i> Contact Page</a>
            </li>
        </ul>
    </div>      
</div>

Jquery:

<script>
    $(document).ready(function()
    {
        $.fn.animateRotate = function(angle, duration, easing, complete) {
            var args = $.speed(duration, easing, complete);
            var step = args.step;
            return this.each(function(i, e) {
                args.step = function(now) {
                    $.style(e, 'transform', 'rotate(' + now + 'deg)');
                    if (step) return step.apply(this, arguments);
                };

                $({deg: 0}).animate({deg: angle}, args);
            });
        };

        $("#buttonphone").click(function(){

           if (!$(this).hasClass("expanded")){
              $("#cont").animate({height: '160px',},340);
              $('.telefoontje').animate({ marginTop: "140px" }, 300)
              $(".telefoontje").animateRotate(180, 400, "linear", function(){
                });
              $(this).addClass("expanded");
           }
           else {
              $("#cont").animate({height: '35px',},300);
              $('.telefoontje').animate({ marginTop: "10px" }, 300)
              $(".telefoontje").animateRotate(-180, 400, "linear", function(){
                });
              $(this).removeClass("expanded");
           }
        });
    });
</script>

And some CSS:

.bannertop{
    font-size: 15px;
    height:40px;
    text-align:center;
    display: none;
    position:relative;
    z-index:999999999999999999!important;
}

.telefoontje{
    color: #fff;
    display:inline-block;
    margin-top:10px;
    position:absolute;
    font-size: 16px!important;
    z-index:999999999999999999;
}

.bannertopcontact{
    list-style: none;   
    color: #fff;
    margin-top:30px;
    z-index:999999999999999999!important;
}

.banneritem{
    margin-top:13px;    
}

#cont{
    background-color:#85BD3E;
    height: 35px;   
    overflow:hidden;
    z-index:999999999999999999!important;
    position:relative;
}

Answer №1

After simplifying the code to include only a slideToggle() animation, I also decided to remove unnecessary high values of z-index that were not serving any purpose. This allowed for a more streamlined and straightforward implementation.

$("#buttonphone").click(function(){
  $('.bannertopcontact').slideToggle();
});
.bannertop{
    font-size: 15px;
    text-align:center;
}

.telefoontje{
    color: #fff;
    display:inline-block;
    margin-top:10px;
    font-size: 16px;
}

.bannertopcontact{
    list-style: none;   
    color: #fff;
    padding-left: 0;
    margin: 0; 
    display: none;
    padding-bottom: 30px;
}

.banneritem{
    margin-top:13px;    
}

#cont{
    background-color:#85BD3E;
}

#buttonphone { 
  padding: 15px 0; display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bannertop">
    <div id="cont">
        <a href="#" id="buttonphone">button</a>
        <ul class="bannertopcontact">
            <li class="banneritem">
                <a style="color:#fff;" href="tel:+2523532523532"><i class="fa fa-phone" aria-hidden="true"></i>352353252</a>
            </li>
             <li class="banneritem">
                <a style="color:#fff;" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c25222a230c3b292e3f253829622220">[email protected]</a>"><i class="fa fa-envelope" aria-hidden="true"></i> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5dcdbd3daf5c2d0d7c6dcc1d09bdbd9">[email protected]</a></a>
            </li>
             <li class="banneritem">
                <a style="color:#fff;" href="contact.php"><i class="fa fa-external-link" aria-hidden="true"></i> Contactpagina</a>
            </li>
        </ul>
    </div>      
</div>
<p id="content">website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content  </p>

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

Guidelines for implementing a logout feature in Django using templates

Here is my views.py file: from django.shortcuts import render from django.views.decorators.csrf import csrf_exempt import os # Create your views here. @csrf_exempt def index(request): if('loggedIn' in request.session): id = request. ...

Is there a way to live filter results using Vue?

Looking to apply a filter on my input v-model to search through a list of products. The current filter only shows items with an exact match to the input. How can I adjust it to display partial matches as the user types? Vue.filter('byName', fun ...

AngularJS Error: $element.find(...) does not support iteration

I'm attempting to utilize a datatable in my AngularJS application. Below is the HTML code I've implemented: <div ng-app="datatable"> <div ng-controller="voucherlistcontroller"> ...

Solving the challenge of handling multiple text inputs in Laravel Blade using Vue.js v-model within a @

Hello, I am encountering an issue with my Laravel application that displays posts and comments. The problem lies with the Vue v-model in the input text when using the @foreach directive in Blade. Each post is showing the comments input box, but when I ente ...

Avoid losing any entered form information when leaving the page

As I work on creating a datagrid with hundreds of rows, each row features a checkbox that allows users to select items from the grid. I've noticed that users might spend considerable time filtering and searching through the grid, ticking checkboxes a ...

"Returning undefined: The outcome of using jQuery's .html() method on

I am having an issue with the JavaScript function I have created to load content from another URL into the current document. For some reason, both contentHtml and menuHtml variables are showing as undefined. Can someone please help me identify where I we ...

The div element is not resizing properly when the phone is in landscape mode

I have set a background photo to take up 100% of the height. However, when I view the site on a mobile phone in landscape mode using Chrome or Firefox, the background image does not fill the entire space. In desktop and portrait mobile modes, everything ...

Utilize AngularJS to enable the forward and back buttons to fetch JSON data, but ensure that the data is only retrieved if the item meets

I have successfully implemented forward and back buttons for paging through data items in an array from a JSON file: Controller: dishControllers.controller('DrinkcardsController', ['$scope','$http','$routeParams', ...

Mobile Bootstrap4 NavBar Bug Fix

I am currently working on coding a website with Bootstrap. The navbar functions perfectly on desktop, but when accessed via mobile device, the button containing all the links does not work. Here is a picture for a more accurate description Below is my HTM ...

What is the best way to load the contents of an HTML file into a <div> element without it behaving as an object?

Currently, I am importing an HTML file into a <div> in this manner: function load_content() { document.getElementById('content').innerHTML = '<object type="text/html" width="100%" height="100%" data="./content.html"></obj ...

Material-UI icons refusing to show up on the display

I've been working on creating a sidebar component and importing various icons to enhance the UI, but for some reason they are not displaying on the screen. I even tried other suggested solutions without success. <SidebarOption Icon = {InsertComment ...

establish a compacted directory shortcut within alfresco

Although I'm not highly skilled in Javascript, I am in need of creating a webscript for Alfresco that can generate an alias [A] for a folder (space) [B]. If the structure of [B] appears as companyhome/site/special/my/fo/ld/de/r, [A] should be struct ...

Passing data from a textbox on a PHP page to a textbox on an ASP.NET website

I'm working on a PHP website that includes a login form. When students enter their username and password, I want them to be redirected to an ASP.NET website (not mine) that also requires a login. I want the username and password they entered on my PHP ...

Refresh the page using a promise in Angular after a delay of 3 seconds

Currently, I am working on enhancing the functionality of the login page. In case a user enters an incorrect login and password combination, my goal is to have the page automatically reload after 3 seconds. Despite my best efforts, I have encountered chall ...

When using JSON.Stringify in a React App, it only displays the first item and the length of the object instead of all the other items

Working on a React App, I encountered an issue while trying to convert an array to JSON and send it to the server. My approach was like this: console.log(JSON.stringify(mainArray)) I anticipated seeing output like this during testing: "breakfast": { ...

Troubles encountered when cascading val(), text(), and data()

Here is my JavaScript/jQuery code: $select.append($("<option />") .val(this.id) .text(this.text) .data('name', this.name) .data('isstorage', this.isstorage)); Although it successfully assigns values to t ...

Display the Bootstrap datepicker within an h4 element set to default to today's date, utilizing both Angular and jQuery

Utilizing Boostrap datepicker to obtain the selected date from the calendar and insert it into an <h4> html tag. However, my goal is to display today's date by default in the h4 when it opens for the first time. Using angular.js + jquery f ...

Issue with displaying dates correctly when retrieving data from an external CSV using Highcharts (Highstock)

I have been struggling for several days to integrate Highstock with an external CSV file. Initially, the problem was that the imported data was sorted in "descending" order while Highcharts required it to be sorted in "ascending" order. After discovering a ...

Raising the css value for each element that is impacted

I am faced with an infinite number of elements that I need to arrange next to each other. Each element has a class called "box". My goal is to separate each box by 10px increments, meaning the first element will have a left property of 0px, the second 10px ...

Matching utility types and themes in Tailwind CSS

I encountered an issue while trying to implement the Tailwind plugin in my project. It seems that a TypeScript error has occurred. I'm curious about the data types of matchUtilities and themes. Can someone provide some insight? const plugin = require( ...