Click to reveal the hidden div located at the bottom of the webpage

I have created a simple webpage where all the content is visible without the need to scroll down.

However, there is additional content at the bottom that I want to keep hidden until the user chooses to see it.

The idea is to have a phrase at the bottom of the page that, when clicked, reveals this hidden content. Upon clicking the phrase, it will slightly move up to make room for the displayed content below it. This animation effect would make the hidden content appear from bottom to top, resembling a "reverse drop-down menu."

Below is the HTML code snippet for the section with the "click-show" h3 element, which acts as the trigger for displaying the four buttons.

<div class="row text-center">

        <h3 id="click-show">Click here to see the buttons.</h3>

        <hr class="spacer">

            <div class="col-md-3 col-xs-12">
            <section> <a href="#"><button>
                        <h1>Button 1</h1>
                    </button></a> </section>
            </div>

            <div class="col-md-3 col-xs-12">
            <section> <a href="#"><button>
                        <h1>Button 2</h1>
                    </button></a> </section>
            </div>

            <div class="col-md-3 col-xs-12">
            <section> <a href="#"><button>
                        <h1>Button 3</h1>
                    </button></a> </section>
            </div>

            <div class="col-md-3 col-xs-12">
            <section> <a href="#"><button>
                        <h1>Button 4</h1>
                    </button></a> </section>
            </div>

        </div>

As a beginner, I am unsure if this functionality can be achieved using CSS alone or if other languages are required. Any guidance or tips on how to implement this feature would be greatly appreciated! Thank you in advance!

Answer №1

Utilize the power of jQuery.

  • $(document).ready - Use this function to execute a callback function once the document is fully loaded.
  • $('#click-show').click - This function triggers a callback function when an element with the id click-show is clicked.
  • $('div.hide-show').toggle() - If a div element with the class="col-md-3" is hidden, it will be shown. If it is visible, it will be hidden.

    To target specific elements only, I added a class name hide-show to the div's.

  • Begin by loading jQuery with the following code:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(document).ready(function(){
  $('#click-show').click(function(){
   $('div.hide-show').toggle();
  });
});
.hide-show{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center">

        <h3 id="click-show">Click here to see the buttons.</h3>

        <hr class="spacer">

            <div class="hide-show col-md-3 col-xs-12">
            <section> <a href="#"><button>
                        <h1>Button 1</h1>
                    </button></a> </section>
            </div>

            <div class="hide-show col-md-3 col-xs-12">
            <section> <a href="#"><button>
                        <h1>Button 2</h1>
                    </button></a> </section>
            </div>

            <div class="hide-show col-md-3 col-xs-12">
            <section> <a href="#"><button>
                        <h1>Button 3</h1>
                    </button></a> </section>
            </div>

            <div class="hide-show col-md-3 col-xs-12">
            <section> <a href="#"><button>
                        <h1>Button 4</h1>
                    </button></a> </section>
            </div>

        </div>

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 HTML5's getCurrentPosition function with Meteor

Attempting to utilize the html5 geolocation api within Meteor. Executing: navigator.geolocation.getCurrentPosition(handle_geolocation_query); in my javascript code but encountering issues - suspect it could be tied to the restrictions on timing ( ) enfo ...

AngularJS directive that offers dynamic functionality

Currently, I am working on dynamically inserting an ng-options directive within various <select> elements throughout my application. These elements have their own unique class names and other directives, such as ng-if, among others. <div ng-app=" ...

What is the best way to insert an anchor tag into text using React?

I am working with a variable const linkElement = `Hey this is a link ${<a href="www.google.com">Click me!</a>} that can be clicked}` Currently, it displays as Hey this is a link [Object object] that can be clicked. Is there a way to ...

Set the height of the main div container to a fixed size

I am facing an issue with my div container (mapInfo-Container) which contains multiple div blocks. I want the container to have a fixed height of 250px, and be scrollable for any content exceeding this height. Here is the code snippet: http://jsfiddle.net ...

Tips for rearranging table columns using drag and drop in react js

I have been experimenting with various libraries to create a drag-and-drop feature for changing table columns order. Here is my current implementation: import React, { useState } from 'react'; import './list_de_tournees.css' const Table ...

ExpressJS and cookies - Struggling to initialize a cookie with express-cookie

I recently followed a tutorial on YouTube (https://youtu.be/hNinO6-bDVM?t=2m33s) that demonstrated how to display a cookie in the developer tools Application tab by adding the following code snippet to the app.js file: var session = require('express- ...

Tips for managing the number of items returned in a dataProvider using AS3

*Hey there! I'm looking to only display 100 items in a list component from a dataProvider, even if it contains more than 500 or even 1000 items. Specifically, I want the first 100 items with cameras on to be included, and then fill the rest to reach a ...

Ways to include a variable in a string when using the .open("GET", "[...]") method

Is it possible to include a variable in the URL using JavaScript and PHP interaction? requeteAjax.open("GET", "../src/App/handler.php?id="); For instance, if the event number is 13, the desired URL should be: requeteAjax.open("GET", "../src/App/handler. ...

Tips for resolving NPM high severity vulnerabilities related to pollution issues

Every time I attempt to install npm packages, I encounter the same error message indicating "3 high severity vulnerabilities." When I execute the command npm audit fix, I consistently receive this: https://i.stack.imgur.com/3oJIB.png I have attempted to ...

Get rid of the right border on the last child pseudo-class

I can't seem to figure this out. It's frustrating because I usually don't struggle with something as basic as a pseudo-class. My goal is to remove the right border of a div element for the last child. I've managed to make it work by ad ...

Update background to full screen and include text when hovering over DIV

Currently, I am utilizing Bootstrap and have a layout with 6 columns containing icons/text within. I desire to implement a hover effect where each column triggers a background change in transition for the entire section. In addition, text and button elemen ...

Attempting to replicate the action of pressing a button using Greasemonkey

I am currently working on a greasemonkey script to automate inventory updates for a group of items directly in the browser. I have successfully implemented autofill for the necessary forms, but I am facing challenges with simulating a click on the submissi ...

What are the different kinds of properties that can be used in Vue.js

When working with Javascript, I can create arrays that hold different types of data elements like: var ex = ['name', 12, true]; console.log(ex); In Vue JS, when defining props for a component within a single file template, I have the option to ...

Revamping a design using Mustache js

I've successfully implemented mustache js to render a template using data from an API, but now I face a challenge in updating the same template at a later time. Within my template, there is a list structured like this: template.html <div id="temp ...

Reloading the Angular application returns it to its initial state

I am currently developing a Dashboard using AngularJS. I am utilizing ui.router to generate states from a JSON file named `pages.json`. Even though my app is functioning properly, I am facing an issue where refreshing the page with the URL "localhost:#/ma ...

Implement a loading bar on the entire page in Vue.js while a request is being made

There is an "edit" button on my page which allows me to edit certain elements and either save or close without saving. I would like to implement a loading bar that displays when the user clicks the "save" button, indicating that the data is being processe ...

What steps can I take to safeguard my Javascript from unauthorized access by external entities?

Basically, I have a website with a Javascript library that has ads integrated through a script tag. My main concern is whether these ads can access my Javascript library, which makes Ajax calls to a server where the user is logged in. I want to protect my ...

Add a new variable to the data in a jQuery ajax request for each request with any updates

I've encountered an issue with the code below, which is meant to add additional data to any ajax request made by my app. It works fine when the page first loads, but because my application is single-page and ajax-based, I need the updated variable val ...

What could be causing the lack of downward rotation of my arrow in css? (specifically, the span element)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de ...

What steps can be taken to ensure that the v-model input is not updated?

Typically, when a user enters a value in an input field, it automatically updates a model. However, I am looking to temporarily prevent this automatic update. In my application, I have a canvas where users can draw grids by entering lengths and widths in i ...