Overflowing issue with jQuery Show DIV disrupting footer of other DIVs

I have utilized jQuery to create a simple show/hide functionality. Currently, I am facing two issues:

1) The hidden DIV is displaying over the footer instead of causing the footer to drop down automatically. How can I achieve this?

2) Is there a way to have the Contact Us DIV open when the page loads without using IDs?

Here is the link to my fiddle: http://jsfiddle.net/oampz/WkuMg/10/

HTML:

<ul class="outline">
    <li>
        <div class="heading"> <a>Contact Us</a>

        </div>
        <div class="content">
            <ul>
                <h1>Contact Us</h1>

                <li>    
                    <a href="">How to reach us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>    
                    <a href="">How to email us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>    
                    <a href="">Contact Number</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <div class="heading">   
            <a>Products</a>
        </div>
        <div class="content">
            <ul>
                <h1>Products</h1>

                <li>    
                    <a href="">Tabels</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>    
                    <a href="">Ladders</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>    
                    <a href="">Chairs</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <div class="heading">   
            <a>Our Offices</a>
        </div>
        <div class="content">
            <ul>
                <h1>Our offices</h1>

                <li>    
                    <a href="">Bristol</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>    
                    <a href="">Manchester</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>    
                    <a href="">Leeds</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
            </ul>
        </div>
    </li>
</ul>
<div class="footer">Footer</div>

jQuery:

$(".heading").click(function () {
    var $this = $(this);
    $this.next(".content").show(400);
    $this.parent().siblings().children().next().hide();
    return false;
});

CSS:

.content {
    display: none;
}

.outline {  
    position: relative;
}

.heading {
    font-weight: bold;
    padding: 15px 0 15px 20px;
    background: GREY;
    width: 30%;
}
.content {
    width: 100%;
    margin-left: 35%;
    position: absolute;
    top: -2px;
    width: 60%;
    overflow:hidden;
}
.footer {
    width: 100%;
    background: blue;
    color: white;
}
javascriptjqueryhtmlcssshow

Answer №1

If you're experiencing trouble with your footer, it might be due to the absolute positioning of your content boxes on the page.

In your demo/fiddle, it appears that you're dependent on JavaScript and jQuery library support. To ensure wider compatibility, I have created a fallback solution that functions using regular HTML and CSS. This ensures that your content remains accessible even if JavaScript is disabled or encounters errors.

Feel free to customize the jQuery animations in your demo as needed. I have also made adjustments to the HTML structure provided. Based on the information provided, I assumed you intended to achieve a similar layout as demonstrated below.

HTML

<div class="container clearfix">
    <div class="nav">
        <ul class="outline">
            <li><a href="#contact" data-target="#contact">Contact Us</a></li>
            <li><a href="#products" data-target="#products">Products</a></li>
            <li><a href="#offices" data-target="#offices">Offices</a></li>
        </ul>
    </div>
    <div class="main">
        <div id="contact" class="content">
            <h2>Contact Us</h2>
            <ul>
                <li>
                    <a href="#">How to reach us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>
                    <a href="#">How to email us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>
                    <a href="#">Contact Number</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
        </div>
        <div id="products" class="content">
            <h2>Products</h2>
            <p>Purus tortor cras nunc adipiscing cursus ut sociis placerat mattis non montes aliquam aliquet cursus porttitor porta tortor duis porttitor odio. Pid, sit aliquam? Lorem augue eu magnis egestas vut sagittis elit rhoncus massa egestas sociis, in pulvinar a amet, ut adipiscing. Nascetur turpis, turpis pulvinar eu sit.</p>
        </div>
        <div id="offices" class="content">
            <h2>Offices</h2>
            <ul>
                <li>Office 1</li>
                <li>Office 2</li>
                <li>Office 3</li>
            </ul>
        </div>
    </div>
</div>
<div class="footer">
    Footer
</div>

CSS

/* Ensuring proper clearing of floated elements for normal behavior of .footer */
.clearfix:before,
.clearfix:after {
    content: " "; 
    display: table;
}

.clearfix:after { clear: both; }

.nav,
.main { box-sizing: border-box; }

.nav {
    float: left;
    width: 30%;
    margin-right: 20px;
    background-color: #ccc;
}

.main {
    float: left;
    width: 60%;
}

.footer {
    background-color: blue;
    color: white;
}

/*
  The .hide class is crucial for fallback functionality.
  It allows content to display if JavaScript is disabled or not functional.
  The navigation links will still scroll to the respective sections. :)
*/
.hide { display: none; }

jQuery

$(document).ready(function() {
    $('.content').addClass('hide');

    $('.outline a').on('click', function(e) {
        e.preventDefault();
        $('.content').addClass('hide');
        var showContent = $(this).data('target'),
            selector = '.content' + showContent;
        $(selector).removeClass('hide');
    });
});

JSFiddle Demo

Answer №2

This concept explores the possibility of the footer having a position:relative;, ensuring that there is always space for the content and keeping the footer separate from other elements. Footers typically remain fixed at the bottom of the page, so it's interesting to consider the idea of them being more flexible in their placement.

Check out the FIDDLE for more details.

Answer №3

  1. Modify the footer positioning by setting it to the bottom of the page.

  2. To make an element block-level, apply the CSS property display: block.

Check out the code snippet below:

.footer {
  width: 100%;
  background: blue;
  color: white;
  position: absolute;
  bottom: 0px;
}
.help-panel {   
  position: relative;
}

Feel free to view the live demo

Answer №4

If you need to make changes to your markup and CSS, it seems there are some issues with the HTML. Let's work together to restructure your left menu by wrapping it in a separate div and using another div as a container.

Updated HTML Markup:

<div class="menu">
<ul class="outline">
    <li>
        <div class="heading"><a>Contact Us</a>
        </div>
    </li>
     <li>
        <div class="heading"><a>Products</a>
        </div>
    </li>
    <li>
        <div class="heading"><a>Our Offices</a>
        </div>
    </li>

</ul>
</div>
<div id="contactus" class="content">
    <ul>
        <h1>Contact Us</h1>
        <li><a href="">How to reach us</a>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </li>
        <li>    <a href="">How to email us</a>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </li>
        <li>    <a href="">Contact Number</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </li>
    </ul>
</div>
<div id="products" class="content">
    <ul>
        <h1>Products</h1>

        <li>    <a href="">Tabels</a>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </li>
        <li>    <a href="">Ladders</a>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </li>
        <li>    <a href="">Chairs</a>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </li>
    </ul>
</div>

<div id="ouroffices" class="content">
    <ul>
        <h1>Our offices</h1>
        <li><a href="">Bristol</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </li>
        <li>    <a href="">Manchester</a>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </li>
        <li>    <a href="">Leeds</a>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </li>
    </ul>
</div>
<div class="footer">Footer</div>

Updated jQuery:

$(".content").first().css("display","inline-block");//To show first one on load
$(".heading").click(function () {    
    $(".content").first().show();
    var $this = $(this);
    var divtoShow = $this.text().toLowerCase().split(" ").join(""); // Removes space between text
    $(".content").hide();
    $("#" + divtoShow).css("display","inline-block"); // Added inline style as on show() they will be display:block by default
    return false;
});

Note: When implementing this code, remember that IDs must be unique.

Fiddle Example

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

Ways to change the role link in child elements inherited from the parent in terms of Accessibility

How can I create a tooltip with dynamically added tooltip content div requiring a role link for the aria label to be appended as needed? The initial HTML of the tooltip before expansion is: <div class="tooltip" tabindex="0" aria-expa ...

javascripthtmlaccessibilitywai-arianvda

Locate the parent element using a unique child element, then interact with a different child element

Can you help me come up with the correct xpath selector for this specific element? The element only has a unique href. Is it possible to locate the element by searching for the text iphone X within the href="#">iphone X and also checking for its paren ...

javascriptcssseleniumxpathprotractor

What error am I making when attempting to validate an email address with RegExp?

I have been attempting to verify the format of an email address using the script below, but I seem to be making a mistake somewhere. When I try to match the reg_1 pattern with str_1, str_2, str_3, I consistently get a false result. Can anyone help me und ...

javascriptregex

Keycloak does not support using the updateToken() function within an asynchronous function

In our development of a Spring application with React/Redux frontend, we faced an issue with Keycloak authentication service. The problem arose when the access token expired and caused unexpected behavior in our restMiddleware setup. Here is a simplified v ...

javascriptreactjsjbosskeycloak

Leveraging IPFS to host a CSS stylesheet

I've been trying to load a css stylesheet using this link... I attempted adding the link tag to both the main and head tags. <link type="text/css" rel="stylesheet" href="https://ipfs.io/ipfs/Qmdun4VYeqRJtisjDxLoRMRj2aTY9sk ...

javascripthtmlcssipfs

Verify the values in the dropdown menu and then cross-reference them with the user's input

Is there a way to verify if the textfield, newTeamName, is already included in a list of teamnames that are stored within a select box? I seem to be encountering issues with my code - can you point out what might be the problem? Just to note, there are no ...

javascriptjquery

The reflow feature in Highcharts does not properly update the width of the container for High

https://i.sstatic.net/8Shix.gif I am currently working on adjusting the width of Highcharts dynamically to fit its parent container. To achieve this, I have set up a mechanism that listens to changes in the sidebar state and triggers a reflow function whe ...

javascriptreactjshighcharts

Error: Attempting to access 'props' property of undefined when clicking on a button within a React application leads to a TypeError

I'm currently working on implementing two buttons that will enable navigation to different pages within my React app. However, I encountered an error when attempting to use the button labeled "home." TypeError: Cannot read properties of undefined (rea ...

javascriptnode.jsreactjs

Implementing raw static HTML files in webpack: a step-by-step guide

Recently, I created a basic template called test.html <div>raw text with content</div> All I'm trying to achieve is to import the raw file without any alterations For example: require('./test.html'); // This should return "&l ...

javascripthtmlnode.jsnpmwebpack

What causes divs to be interspersed among other divs when Float is enabled?

I am looking to create a layout for 4 sections, similar to a table, utilizing only divs and CSS. The intended output is this: Logo-----------Info Business-------Client I initially thought it would be simple by using the Float property. However, when I se ...

htmlcss

What causes the component to remount with every update to its state?

PLEASE NOTE: Before posting this question, I realized that there were some errors in my code. I understand now that this question may not be helpful to others as it contains misleading information. I apologize and appreciate those who took the time to res ...

javascriptreactjsreact-nativeuse-state

Ways to detect and respond to events in this particular scenario

I'm creating necessary components dynamically based on the provided CSS. This process involves iterating through a response array and generating HTML elements accordingly. for (var i = 0; i < responseinner.length; i++) { for (var k = 0; k < ...

javascriptjquery

To emphasize code in an HTML document, you can use the <font color="#xxx"> tag

Can anyone guide me on how to add color highlights to my HTML code in this way? <font color="#1773cc">#include </font><font color="#4a6f8b">&lt;NTL/ZZ.h&gt;</font><br> <br> <font color=&quo ...

htmlhighlight

Is there a way to retrieve all the items from the array?

I've been on the hunt for this information but unfortunately, I haven't found a satisfactory answer yet. Currently, I am utilizing Json encode to transfer my array to JavaScript: In PHP while($row = mysql_fetch_assoc($select)) { $event_day = $ ...

javascriptjqueryjson

Creating synchronous behavior using promises in Javascript

Currently, I am working with Ionic2/Typescript and facing an issue regarding synchronization of two Promises. I need both Promises to complete before proceeding further in a synchronous manner. To achieve this, I have placed the calls to these functions in ...

javascriptsqlitetypescript

Is it possible to limit the values of parameters with react-router?

Currently, I am in the process of developing a website using react and react-router. I have two different types of routes set up, as shown below: <Route name="products" path="/:type/*" handler={ ProductList } /> <Route name="generic-template" p ...

javascriptreactjsreact-router

Modify the color of the footer area and eliminate any underlines present

In the footer section, the tags are displaying in blue color and I would like to remove the line under the li tags. If necessary, I can provide additional HTML or CSS code for reference. Below is the snippet of HTML and CSS related to the footer: My HTML ...

htmlcss

Tips for storing a JavaScript variable or logging it to a file

Currently working with node, I have a script that requests data from an API and formats it into JSON required for dynamo. Each day generates around 23000 records which I am trying to save on my hard drive. Could someone advise me on how to save the conte ...

javascriptfileloggingsave

What modifications need to be made to the MEAN app before it can be deployed on the server?

Following a tutorial on Coursetro, I was able to successfully build an Angular 4 MEAN stack application. However, when it comes to deploying the app on a server running on Debian-based OS, I am facing some challenges. The application should be accessible o ...

javascriptnode.jsangularmongodbexpress

What is the order of reflection in dynamic classes - are they added to the beginning or

Just a general question here: If dynamic classes are added to an element (e.g. through a jQuery-ui add-on), and the element already has classes, does the dynamically added class get appended or prepended to the list of classes? The reason for my question ...

javascriptjqueryjquery-uijquery-plugins