Ways to position the second section below the button

Is there a way to make a section of my website where, upon pressing a button, the button moves to the left and reveals collapsed text that appears below it with some padding on top? I've been trying to achieve this as a beginner by looking through documentation and conducting Google searches, but haven't had any success yet. Any help is greatly appreciated!

Code:

const sourcesButton = document.querySelector('#bibliographySources');
let bibliographySources = document.getElementById("bibliographySources");

bibliographySources.style.display = "none";

function showSources() {
  let sourceStyling = document.getElementById("bibliographySources");
  if (sourceStyling.style.display === "none") {
    sourceStyling.style.display = "block";
  } else {
    sourceStyling.style.display = "none";
  }
}
.sourcesButton {
  position: relative;
}

.footerStyling {
  color: white;
  padding: 1rem;
}

.sourceStyling {
  color: white;
  padding: 2rem;
}

.bibliographySources {
  padding: 1 0 0 0rem;
  clear: both;
}

footer {
  display: flex;
  background-color: #655A06;
  justify-content: center;
}
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b6964647f787f796a7b4b3e253b253a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">


<!-- Footer -->
<footer>
  <div class="footerStyling" id="footer">
    <a onclick="showSources()" id="#bibliography" class="btn rounded btn-outline-light sourcesButton">Sources</a>
  </div>
  <section>
    <div class="row sourceStyling bibliographySources" id="bibliographySources">
      <p>
        Carbon Neutral by 2040 (Oleksyn, 2021)<br>
        <br>World goal of Carbon Neutrality by 2050 (Oleksyn, 2021)<br>
        <br>Donut Chart showing the sources of emissions amongst industries (Saskatchewan, 2020)<br>
        <br>Saskpower looking to supply power through solar energy & more by 2030 (Praill, 2018)<br>
        <br>Canada GHG Emission Heatmap - (Saskatchewan, 2020)<br>
        <br>Saskatchewan’s CO2 Emissions 76.4Mt in 2018 - (Saskatchewan, 2020)<br>
        <br>Canada’s CO2 Emissions 728Mt in 2018 - (Government of Canada, 2019)<br>
        <br>Sources of GHG Emissions from Federal Fleets in Canada - (Saskatchewan, 2020)<br>
        <br>221 MW of operating wind capacity spread across 143 turbines, generating 3.1% of Saskatchewan's electricity - (SaskWind, 2020)<br>
        <br>
      </p>
      <h3>
        References
      </h3>
      <p>
        <br>Government of Canada. (2019). Government of Canada. Retrieved from Greenhouse gas emissions:<br> https://www.canada.ca/en/environment-climate-change/services/environmental-indicators/greenhouse-gas-emissions.html<br>
        <br>Oleksyn, M. (2021, April 27). SES report sees carbon neutral grid by 2040 possible for SaskPower. Retrieved from Prince Albert Daily Herald:<br> https://paherald.sk.ca/2021/04/27/ses-report-sees-carbon-neutral-grid-by-2040-possible-for-saskpower/<br>
        <br>Praill, C. (2018, June 19). SaskPower announces 10 megawatt solar project, first in Sask. Retrieved from Global News:<br> https://globalnews.ca/news/4284462/saskpower-announces-10-megawatt-solar-project-first-in-sask/<br>
        <br>Saskatchewan. (2020). Retrieved from Greenhouse Gas Emissions:<br> https://www.saskatchewan.ca/residents/environment-public-health-and-safety/state-of-the-environment/saskatchewans-state-of-the-environment/greenhouse-gas-emissions<br>
        <br>SaskWind. (2020). SaskWind. Retrieved from Location of Saskatchewan Wind Farms:<br> https://www.saskwind.ca/location-of-sk-wind-farms<br>
      </p>
    </div>
  </section>
</footer>

htmlcssbootstrap-5

Answer №1

You forgot to include flex-direction: column in the styling of your flex container:

const sourcesButton = document.querySelector('#bibliographySources');
let bibliographySources = document.getElementById("bibliographySources");

bibliographySources.style.display = "none";

function showSources() {
  let sourceStyling = document.getElementById("bibliographySources");
  if (sourceStyling.style.display === "none") {
    sourceStyling.style.display = "inline-block";
  } else {
    sourceStyling.style.display = "none";
  }
}
.sourcesButton {
  position: relative;
}

.footerStyling {
  color: white;
  padding: 1rem;
}

.sourceStyling {
  color: white;
  padding: 2rem;
}

.bibliographySources {
  padding: 1 0 0 0rem;
  clear: both;
}

footer {
  display: flex;
  flex-direction: column;
  background-color: #655A06;
  justify-content: center;
}
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04666b6b70777076657444312a342a35">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">


<!-- Footer -->
<footer>
  <div class="footerStyling" id="footer">
    <a onclick="showSources()" id="#bibliography" class="btn rounded btn-outline-light sourcesButton">Sources</a>
  </div>
  <section>
    <div class="sourceStyling bibliographySources" id="bibliographySources">
      <p>
        Carbon Neutral by 2040 (Oleksyn, 2021)<br>
        <br>World goal of Carbon Neutrality by 2050 (Oleksyn, 2021)<br>
        <br>Donut Chart showing the sources of emissions amongst industries (Saskatchewan, 2020)<br>
        <br>Saskpower looking to supply power through solar energy & more by 2030 (Praill, 2018)<br>
        <br>Canada GHG Emission Heatmap - (Saskatchewan, 2020)<br>
        <br>Saskatchewan’s CO2 Emissions 76.4Mt in 2018 - (Saskatchewan, 2020)<br>
        <br>Canada’s CO2 Emissions 728Mt in 2018 - (Government of Canada, 2019)<br>
        <br>Sources of GHG Emissions from Federal Fleets in Canada - (Saskatchewan, 2020)<br>
        <br>221 MW of operating wind capacity spread across 143 turbines, generating 3.1% of Saskatchewan's electricity - (SaskWind, 2020)<br>
        <br>
      </p>
      <h3>
        References
      </h3>
      <p>
        <br>Government of Canada. (2019). Government of Canada. Retrieved from Greenhouse gas emissions:<br> https://www.canada.ca/en/environment-climate-change/services/environmental-indicators/greenhouse-gas-emissions.html<br>
        <br>Oleksyn, M. (2021, April 27). SES report sees carbon neutral grid by 2040 possible for SaskPower. Retrieved from Prince Albert Daily Herald:<br> https://paherald.sk.ca/2021/04/27/ses-report-sees-carbon-neutral-grid-by-2040-possible-for-saskpower/<br>
        <br>Praill, C. (2018, June 19). SaskPower announces 10 megawatt solar project, first in Sask. Retrieved from Global News:<br> https://globalnews.ca/news/4284462/saskpower-announces-10-megawatt-solar-project-first-in-sask/<br>
        <br>Saskatchewan. (2020). Retrieved from Greenhouse Gas Emissions:<br> https://www.saskatchewan.ca/residents/environment-public-health-and-safety/state-of-the-environment/saskatchewans-state-of-the-environment/greenhouse-gas-emissions<br>
        <br>SaskWind. (2020). SaskWind. Retrieved from Location of Saskatchewan Wind Farms:<br> https://www.saskwind.ca/location-of-sk-wind-farms<br>
      </p>
    </div>
  </section>
</footer>

Answer №2

Consider another approach: utilize flex on the footer division containing the button and maintain a regular layout for the rest of the content. Simply adjust the CSS rules for footer by transitioning them to #footer

footer {
  background-color: #655A06;
}
#footer{
  display: flex;
  justify-content: center;
}


const sourcesButton = document.querySelector('#bibliographySources');
let bibliographySources = document.getElementById("bibliographySources");

bibliographySources.style.display = "none";

function showSources() {
  let sourceStyling = document.getElementById("bibliographySources");
  if (sourceStyling.style.display === "none") {
    sourceStyling.style.display = "block";
  } else {
    sourceStyling.style.display = "none";
  }
}
.sourcesButton {
  position: relative;
}

.footerStyling {
  color: white;
  padding: 1rem;

}

.sourceStyling {
  color: white;
  padding: 2rem;
   width:100%;
}

.bibliographySources {
  padding: 1 0 0 0rem;
  clear: both;
}

footer {
  background-color: #655A06;
}
#footer{
  display: flex;
  justify-content: center;
}
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6a4a9a9b2b5b2b4a7b686f3e8f6e8f7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">


<!-- Footer -->
<footer>
  <div class="footerStyling" id="footer">
    <a onclick="showSources()" id="#bibliography" class="btn rounded btn-outline-light sourcesButton">Sources</a>
  </div>
  <section>
    <div class="row sourceStyling bibliographySources" id="bibliographySources">
      <p>
        Carbon Neutral by 2040 (Oleksyn, 2021)<br>
        <br>World goal of Carbon Neutrality by 2050 (Oleksyn, 2021)<br>
        <br>Donut Chart showing the sources of emissions amongst industries (Saskatchewan, 2020)<br>
        <br>Saskpower looking to supply power through solar energy & more by 2030 (Praill, 2018)<br>
        <br>Canada GHG Emission Heatmap - (Saskatchewan, 2020)<br>
        <br>Saskatchewan’s CO2 Emissions 76.4Mt in 2018 - (Saskatchewan, 2020)<br>
        <br>Canada’s CO2 Emissions 728Mt in 2018 - (Government of Canada, 2019)<br>
        <br>Sources of GHG Emissions from Federal Fleets in Canada - (Saskatchewan, 2020)<br>
        <br>221 MW of operating wind capacity spread across 143 turbines, generating 3.1% of Saskatchewan's electricity - (SaskWind, 2020)<br>
        <br>
      </p>
      <h3>
        References
      </h3>
      <p>
        <br>Government of Canada. (2019). Government of Canada. Retrieved from Greenhouse gas emissions:<br> https://www.canada.ca/en/environment-climate-change/services/environmental-indicators/greenhouse-gas-emissions.html<br>
        <br>Oleksyn, M. (2021, April 27). SES report sees carbon neutral grid by 2040 possible for SaskPower. Retrieved from Prince Albert Daily Herald:<br> https://paherald.sk.ca/2021/04/27/ses-report-sees-carbon-neutral-grid-by-2040-possible-for-saskpower/<br>
        <br>Praill, C. (2018, June 19). SaskPower announces 10 megawatt solar project, first in Sask. Retrieved from Global News:<br> https://globalnews.ca/news/4284462/saskpower-announces-10-megawatt-solar-project-first-in-sask/<br>
        <br>Saskatchewan. (2020). Retrieved from Greenhouse Gas Emissions:<br> https://www.saskatchewan.ca/residents/environment-public-health-and-safety/state-of-the-environment/saskatchewans-state-of-the-environment/greenhouse-gas-emissions<br>
        <br>SaskWind. (2020). SaskWind. Retrieved from Location of Saskatchewan Wind Farms:<br> https://www.saskwind.ca/location-of-sk-wind-farms<br>
      </p>
    </div>
  </section>
</footer>

Answer №3

To center the items in your footer in a column layout, you must add flex-direction: column; and align-items: center;.

According to MDN, changing the flex-direction to column will align the items to the left and right using align-items and align-self.

const sourcesButton = document.querySelector('#bibliographySources');
let bibliographySources = document.getElementById("bibliographySources");

bibliographySources.style.display = "none";

function showSources() {
  let sourceStyling = document.getElementById("bibliographySources");
  if (sourceStyling.style.display === "none") {
    sourceStyling.style.display = "block";
  } else {
    sourceStyling.style.display = "none";
  }
}
.sourcesButton {
  position: relative;
}

.footerStyling {
  color: white;
  padding: 1rem;
}

.sourceStyling {
  color: white;
  padding: 2rem;
}

.bibliographySources {
  padding: 1 0 0 0rem;
  clear: both;
}

footer {
  display: flex;
  flex-direction: column;
  background-color: #655A06;
  align-items: center;
}
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9994948f888f899a8bbbced5cbd5ca">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">


<!-- Footer -->
<footer>
  <div class="footerStyling" id="footer">
    <a onclick="showSources()" id="#bibliography" class="btn rounded btn-outline-light sourcesButton">Sources</a>
  </div>
  <section>
    <div class="row sourceStyling bibliographySources" id="bibliographySources">
      <p>
        Carbon Neutral by 2040 (Oleksyn, 2021)<br>
        <br>World goal of Carbon Neutrality by 2050 (Oleksyn, 2021)<br>
        <br>Donut Chart showing the sources of emissions amongst industries (Saskatchewan, 2020)<br>
        <br>Saskpower looking to supply power through solar energy & more by 2030 (Praill, 2018)<br>
        <br>Canada GHG Emission Heatmap - (Saskatchewan, 2020)<br>
        <br>Saskatchewan’s CO2 Emissions 76.4Mt in 2018 - (Saskatchewan, 2020)<br>
        <br>Canada’s CO2 Emissions 728Mt in 2018 - (Government of Canada, 2019)<br>
        <br>Sources of GHG Emissions from Federal Fleets in Canada - (Saskatchewan, 2020)<br>
        <br>221 MW of operating wind capacity spread across 143 turbines, generating 3.1% of Saskatchewan's electricity - (SaskWind, 2020)<br>
        <br>
      </p>
      <h3>
        References
      </h3>
      <p>
        <br>Government of Canada. (2019). Government of Canada. Retrieved from Greenhouse gas emissions:<br> https://www.canada.ca/en/environment-climate-change/services/environmental-indicators/greenhouse-gas-emissions.html<br>
        <br>Oleksyn, M. (2021, April 27). SES report sees carbon neutral grid by 2040 possible for SaskPower. Retrieved from Prince Albert Daily Herald:<br> https://paherald.sk.ca/2021/04/27/ses-report-sees-carbon-neutral-grid-by-2040-possible-for-saskpower/<br>
        <br>Praill, C. (2018, June 19). SaskPower announces 10 megawatt solar project, first in Sask. Retrieved from Global News:<br> https://globalnews.ca/news/4284462/saskpower-announces-10-megawatt-solar-project-first-in-sask/<br>
        <br>Saskatchewan. (2020). Retrieved from Greenhouse Gas Emissions:<br> https://www.saskatchewan.ca/residents/environment-public-health-and-safety/state-of-the-environment/saskatchewans-state-of-the-environment/greenhouse-gas-emissions<br>
        <br>SaskWind. (2020). SaskWind. Retrieved from Location of Saskatchewan Wind Farms:<br> https://www.saskwind.ca/location-of-sk-wind-farms<br>
      </p>
    </div>
  </section>
</footer>

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

What is the best way to populate missing days in an array up to the current date that do not already contain the "Present" element?

Consider the array below which contains attendance data for an employee (Retrieved from Mongo using Ajax): [{"_id":"5fcdcd49c3657d1e05b846f5","title":"Present","allDay":true,"start":"2020-11- ...

javascripthtmlarraysajaxmomentjs

Progress Bars Styled with CSS Percentages

I need help creating a basic CSS percentage bar. To get started, visit and paste the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w ...

htmlcss

Make sure to choose the radio button that corresponds to the desired title value, as this will be automatically added to the input text

Visit this link for a live example. <div class='liveExample'> <input type="radio" name="gender" value="Mr." checked>Mr. <input type="radio" name="gender" value="Mrs.">Mrs. <p>First name: <input data-bind=&ap ...

javascripthtmlknockout.js

How can I search for a particular string in JavaScript?

I have a unique custom div that has been modified to function as an input element. Inside this custom div input element, there is a <p> tag with a default placeholder text. My goal is to verify whether the content of this div is empty or contains new ...

javascriptjqueryhtmlcss

Styling the background of a navigation menu specifically for mobile devices using CSS

Currently, my focus is on developing the website I am using Elementskit nav builder and I aim to change the background color of the navigation menu on mobile and tablet devices to black The existing code snippet is as follows: margin-top: 6px; } @med ...

htmlcssdrop-down-menu

polygon with five or more sides

Can divs be created with shapes such as five or six corners? I am looking to create clickable zones on a map and any alternative methods would be greatly appreciated. ...

csshtml

What could be causing my div link to redirect to different content instead of the intended destination?

When creating a div to provide information about a course, including the price and a "Take Class" button that links to the purchase page, I encountered an issue where the link extends beyond the intended area. @import url(https://fonts.googleapis.com/cs ...

javascriptjqueryhtmlcss

Getting checkboxes from an HTML form in Django: A comprehensive guide

I am trying to create a form that displays checkboxes for each item in a list. Here is the structure of my form: <form action="/test"> <ul style="font-size:30px"> {% for d in Dlist %} <li type="none"><input typ ...

pythondjangohtmlformsdjango-forms

Retrieve the data from an input field in Selenium automation

Despite the text being visible in the input Text Box, I am encountering difficulties capturing it from the html DOM. I attempted to use getAttribute('value'), however, since the value attribute is not present, this method proved unsuccessful. Sim ...

htmlseleniumxpath

What is the best way to configure an EmailId validator in Angular 6 to be case insensitive?

My register and login page include a form validator pattern matching for the registration form. this.registerForm = this.formBuilder.group({ firstName: ['', Validators.required], emailId: ['', [Validators.required, Validators.patt ...

htmlmysqlnode.jsangularangular6

Tips on generating an HTML element using JavaScript and storing it in a MySQL database

I need help with saving a created element to the database so that it remains on the page even after refreshing. Any assistance would be greatly appreciated. Thank you. document.getElementById("insert").onclick = function(){ if(document.getElementById( ...

javascriptjqueryhtmlmysql

Issue with implementing LocomotiveScroll on a sticky element

Working on a personal project, I have been experimenting with Nextjs and locomotive-scroll. I am attempting to use position:sticky; along with data-scroll-sticky, but unfortunately the desired functionality is not working as expected. Here is the code snip ...

cssnext.jsstickysmooth-scrollinglocomotive-scroll

Unique background image is assigned to each div sharing the same class

Seeking a way to assign unique random backgrounds to each div with the .item class. Initially attempted using PHP and CSS, for example: <?php $bg = array('bg1.jpg', 'bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg ...

javascriptphpjquerycssrandom

Using various designs on elements generated from ng-repeat

Is it possible to apply different styles to buttons created using ng-repeat by having b.color return a value from the btnValues object? Currently, it is not returning the value. If this is not possible, are there alternative methods to achieve this? < ...

htmlangularjsangularjs-ng-repeat

I'm encountering an issue with the dropify plugin where the data-allowed-file-

While using the dropify library to style file upload elements in my form, I ran into an issue with the data-allowed-file-extensions parameter not working as expected. Despite specifying allowed file extensions like "png jpg jpeg", the validation for input ...

jqueryhtmlfile-uploaddropify

Pressing the 'Enter' key within a textarea in a JQuery

This question seems fairly straightforward. I have a text area where hitting "enter" submits the content. Even though I reset the text to "Say something..." after submission, the cursor continues to blink. Is there a way to require the user to click on ...

javascripthtmlajax

What is the best way to automatically close a modal box after submitting a form?

Currently, I am utilizing the CSS modal box developed by Paul R. Hayes. More information about this can be found here - Within the modal box, I have integrated a form. This form is aimed at an iframe that remains concealed on the same page. My objective i ...

htmlcssforms

Clicking on the menu to reveal the dropdown options using JavaScript

I have created a drop-down menu for my website, but I am facing an issue. When I click on the links again, it does not work properly because I lack expertise in JavaScript. I would appreciate any help and suggestions from all of you. Thank you for your tim ...

javascriptjqueryhtmlcss

"Here's how you can mark an option as selected in Angular, either from the component or the HTML file

When it comes to my form, I have a select menu that sends data to an SQL database and then fetches it back when it is called for editing. The value being edited should be displayed in the select menu option as selected. Here's a peek at my code: < ...

htmlangulartypescriptcrud

Make sure to verify if the mode in Angular is either visible-print or hidden-print

Here is a snippet of code <div class="row"> <div class="col-sm-12 visible-print"> Content (display in full width when printed) </div> <div class="col-sm-6 hidden-print"> Content (same as above but only half width when ...

javascriptcssangulartypescriptbootstrap-4