Clicking on each link will cause the content to scroll downward

I have a fixed footer with some links. You can view it here:

Check out the Codepen Demo

This is the HTML code snippet:

 <li class="active"><a href="#">What is Facebook?</a></li>
                        <li><a href="#about">How does it work?</a></li>
                        <li><a href="#contact">Feedback</a></li>
                        <li><a href="#contact">Contact us</a></li>

The footer contains several links, such as What is Facebook?. When a user clicks on one of these links, the content of that page should slide up from the bottom of the screen.

Is there a way to achieve this effect?

javascriptjqueryhtmlcss

Answer №1

To keep things simple, load the content of the link and hide it with display:none. When the user clicks on the link, show it by setting display:block. Here's an example:

<ul class="active">
    <li><a href="#">What is Facebook?</a></li>
    <li><a href="#about">How does it work?</a>
        <div id="aboutus_content" style="display:none"><?php include 'about-us.php' ?></div>
    </li>
    <li><a href="#contact">Feedback</a>
        <div id="contactus_content" style="display:none"><?php include 'contact-us.php' ?></div>
    </li>
    <li><a href="#contact">Contact us</a>
        <div id="contactus_content" style="display:none"><?php include 'contact-us.php' ?></div>
    </li> 
</ul>

This jQuery function will handle it:

$(function(){
    $('ul li').on('click', function(){
        if($(this).css("display") == "block") {
            // do nothing
        } else {
            // Find which li has display: block by its ID, set it to none, and set current li display to block.
        }
    });
});

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

Bootstrap CDN causing modals to fail to appear

Here are the stylesheets I am currently using: script(src="/js/application.js") script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js") script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js") link(rel="styl ...

htmlcssbootstrap-modal

Convert the JSON response object into a string and assign it to a Cookie as the value

I came across a JSON object data that I would like to utilize as a cookie: https://i.sstatic.net/Ivq4n.jpg After converting this object to a string using JSON.stringify(), I encountered an issue when attempting to set it as a Cookie. The process of setti ...

javascriptreactjsjsoncookies

Error: You cannot assign a value to the left side of the console, it is

JavaScript Code if ($language == 'english') { var displayvalue = ""; if (data[i].report_name.length >= 20) { displayvalue = data[i].report_name.substr(0, 20) + "..."; } else { displayvalue = data[i].report_name; } subMDesign ...

javascriptjquerycssangularjs

python django you can only access the first statement

Only the first statement in my name app is accessible to me Javascript: <script type="text/javascript> function searched(){ {% for names in name %} nameSearched = document.getElementById('name').value; document.get ...

javascriptpythonhtmldjango

The jQuery .ajax function encounters an error if the input value of '0' is used

I have developed a number guessing game using jQuery and PHP, which is working well for all numbers except 0. For some reason, the Ajax call fails when 0 is entered as the guess. I suspect that the variable $guess sent to the server-side code is not being ...

jqueryajax

Can anyone explain why the cookie isn't being sent to the server?

Hey there, I'm currently developing a Nodejs REST API that includes sign-up and log-in features. When a user logs in, they receive an accessToken. Additionally, a cookie is stored containing the refreshToken to allow the user to make requests to the ...

javascriptnode.jsrestauthenticationjwt

How to retrieve text content from a span element with Selenium WebDriver and C#

I am at a mental roadblock and can't figure out this puzzle. My goal is to retrieve the number "9" from the span with id = "lookupCount". No matter how much effort I put in, I just can't seem to make it work. Please lend me a hand, here is the pr ...

c#htmlseleniumwebdriver

Intercepting 401 with Angular 5 HTTP Interceptor recognizes it as status code 0

One issue I am currently facing is the inability to intercept a 401 status and redirect to the login page, which is a common practice in most applications. My interceptor code seems pretty standard: intercept(request: HttpRequest<any&g ...

htmlcssangularhttp

Leveraging the httponly cookie for transmitting JWT token between a Node REST API and a Vue.js SPA

I am currently in the process of developing a web application that utilizes a Vue.js frontend along with a Node REST API built using express. I am facing a challenge in implementing authentication, particularly in striving for a stateless approach by utili ...

javascriptnode.jsvue.jscookiesjwt

When attempting to use JSON.parse, it returns an undefined value

When using PHP to create JSON data and retrieving it through AJAX, why does JSON.parse return an "undefined" object? PHP CODE $emparray = array(); while($row =mysqli_fetch_assoc($result)) { $emparray[] = $row; } echo json_encode($emparray); AJ ...

javascriptphpjqueryjsonajax

Simple filling out of a dropdown menu form

Currently attempting to populate a drop-down select menu from a table named "Cars" using the information in the "VIN" column. However, for some reason I am not seeing any data displayed. <form> <label>VIN:</label> <select name ...

phphtmlmysql

Automatically redirect users on page refresh using jQuery

I am attempting to use jQuery to detect when the user refreshes the page in order to redirect, but I can't seem to get it working. Can someone help me figure out what is wrong with this code? <?php include 'instagram.php'; ?> <! ...

javascriptphpjquery

Receiving inaccurate server response with SSE

As I work on developing the project using Django, DRF is already installed. There is a process in the backend that generates a log file. My task is to search for specific target strings at the end of the file and display them on the HTML user page in real- ...

pythonhtmldjangodjango-rest-frameworkserver-sent-events

Executing HTTP Requests for Elements in an Array using JavaScript

I am currently struggling with a script that sends HTTP requests to a website in order to obtain various documents. The document IDs are stored within an array, and my intention is to send a request for each element in the array and return a unique message ...

javascriptxmlhttprequest

implementing dynamic navigation bar, when transforming into a dropdown menu using ReactJS

I am currently utilizing a navigation bar from a Bootstrap theme within my React project. The navigation bar includes an in-built media query that determines whether it should display as a dropdown menu or not, with a toggler to handle the dropdown functi ...

javascripthtmlcssreactjs

The UseEffect hook continues to run even if the dependency (router.query) remains the same

useEffect(() => { console.log('applying filter'); const updatedFilters = { status: { values: { label: router.query.status, value: router.query.status }, }, // Add additional filter properties here... }; ...

javascriptreactjsnext.js

What is the proper way to structure keywords in Microdata for a CreativeWork?

As I delve into Microdata, I am exploring the utilization of Schema.org's keywords for CreativeWork. The schema indicates that it should be text, but I am unsure whether to place each keyword in a separate element with itemprop="keywords", or include ...

htmlschema.orgtaggingmicrodata

What is the best way to retrieve JSON data in a React application?

useEffect(async () => { const fetchPostData = async () => { const response = await axios("") setPosts(response.data) } fetchPostData(); }, []) Rendering : posts.map(post => <li>{post.name} ...

javascriptjsonreactjsasync-awaitaxios

After calling Response.TransmitFile in the code behind, the jQuery dialog fails to close automatically

I am facing an issue with the quoted aspx page where, when I call the closing Dialog from Code Behind, the dialog fails to close. If I comment out the Response Transmit file section of the code, then the dialog closes properly. Otherwise, the download star ...

c#jqueryasp.netdialogdownload

Unable to Establish Connection: Laravel Server Not Receiving Ajax Calls

I've been having trouble getting a response when making a request using a third-party program. Can anyone help me figure out what I might be doing wrong? The response just doesn't seem to be sent at all. I've tried organizing the dependencie ...

jqueryajaxlaravelat.js