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

Display information based on the radio button chosen

I've set up a radio button with options for "no" and "yes", but neither is selected by default. Here's what I'm trying to achieve: If someone selects "no", nothing should happen. However, if they select "yes", then a message saying "hello w ...

javascriptjqueryhtmlcss

Decoding JavaScript elements embedded in an HTML website

My current HTML site includes the following code: <script type="text/javascript"> jwplayer('player_container').setup( { 'width': '640', ...

javascriptandroidhtmlregexjsoup

Forwarding the main webpage from the child Html.renderAction without the need for Ajax, Java, Jquery, or similar technologies

Having an issue with a form in Html.RenderAction where after submitting the form, I need to reload the parent but keep running into the error message "Child actions can not perform redirect actions." Any suggestions on how to resolve this without using Aja ...

c#htmlasp.net-mvc

Retain the existing HTML files of the old website on the webserver while preventing search engines from indexing them

Recently, I completed a website for a client who is looking to replace their ancient HTML hard-coded website. The challenge lies in the fact that they wish to preserve the old website and its files on the web server at their current location. While this do ...

phphtmlseouser-agentrobots.txt

What is the best way to retrieve a particular div element from a webpage?

I'm having trouble retrieving a specific div element (specifically with the attribute id="vung_doc") from a website. Instead of getting just that element, I seem to be getting almost every element on the page. Any ideas on what could be causing this i ...

phphtmlxpathdomdocumentdomxpath

Maximizing cell background color in HTML table with limited width fails to function properly

Having difficulty turning the header cells (th) with background-color applied? It seems like the color bar may be too small, the cell width too large, or the background isn't being affected properly. Is there a way to create a narrow cell with long t ...

csshtml-tablerotationbackground-color

Allow the content to be scrolled

When it comes to my CSS script, I encounter no issues on larger computer screens. However, users with smaller resolutions like 1024 x 768 are experiencing problems viewing the entire HTML page. Only half of the page is displayed, making it impossible for t ...

htmlcss

Is it possible to exclusively target a child div using JavaScript in CSS, without affecting the parent div?

I'm in the process of developing a calendar feature where users can select a specific "day" element to access a dropdown menu for time selection. The functionality is working fine, but I've encountered an issue. When a user selects a time from th ...

javascripthtmlcss

Personalize the hover effect of CardActionArea

I'm attempting to personalize the hover effect of material-ui's CardActionArea for a specific component in my React application. Unfortunately, I am struggling to locate detailed documentation on how to style it effectively. Even after experimen ...

cssreactjsmaterial-ui

Position CSS elements at the bottom of the webpage

I'm having trouble with my footer always being covered by dynamic content on my page. How can I adjust the CSS to make sure the footer stays at the bottom and adjusts to the size of the content? Here's the current CSS code for the footer: div ...

css

Securing containers with CSS styling

I'm currently working on a website and I've encountered an issue with positioning. Within the content section, I have two main text boxes - one in the top left corner and one in the bottom right corner. However, when the browser window is resized ...

csspositioncss-position

Loading screen for specific content within the current WordPress theme

I am trying to display a preloader only in the 'content' div, but it ends up hiding the entire page. The structure of the site is as follows: Title Menu Content (where I want the preloader) Footer I'm having trouble figuring out where exa ...

javascriptjquerycsswordpresspreloader

Show the form for user input

I have an HTML code for a form that requires input. Once the 'OK' button is clicked, the values are sent to a PHP script using $_POST. Is it possible to display the same form again if the input format is incorrect, but do so only within my PHP sc ...

phphtml

Sticky sidebar panel featuring a stationary content block

I have a sidebar that is set to position:fixed; and overflow:auto;, causing the scrolling to occur within the fixed element. When the sidebar is activated, the element remains static on the page without any movement. My goal: I am looking to keep the .su ...

javascriptjqueryhtmlcss

Using CSS to position elements absolutely while also adjusting the width of the div

In one section of my website, I have a specific div structure. This structure consists of two divs stacked on top of each other. The first div is divided into two parts: one part with a width of 63% and another part with a button. Beneath the first div, t ...

javascriptjqueryhtmlcss

What is the best way to arrange these divs one on top of another?

I have combed through numerous resources but still haven't found a solution to my problem. I am struggling with figuring out how to stack the "top_section" div on top of the "middle_section" div. Currently, "middle_section" is appearing above "top_sec ...

htmlcss

No matter what I try, connecting the CSS file to my HTML file just won't seem to work

I've been attempting to connect a CSS file to my HTML index file, but I can't seem to get it to work no matter what I try. I'm using VSCode. When typing the link from scratch, it auto-completes or shows up, indicating that it recognizes it. ...

htmlcss

Is it possible to loop through a subset of a collection using *ngFor?

Is it possible to iterate through a specific range of elements in a collection using *ngFor? For instance, I have a group of checkboxes with their form control name and label specified as follows: [{id: 'c1', label: 'C1'}, ...] Assum ...

javascripthtmlangulartypescriptangular-material

Using Javascript within HTML: A guide on when to utilize semi-colons and when to implement the return false statement

Exploring the use of JavaScript attributes within HTML elements: <input type="button" onclick="somceFunc()" /> <input type="button" onclick="somceFunc();" /> <input type="button" onclick="somceFunc(); return false;" /> Debating whether ...

javascripthtml

Can a hyperlink exist without a specified href attribute?

One scenario could be when I receive this specific code from a third-party source <a class="cs_import">Add contacts from your Address Book</a> Curiously, the link "Add contacts from your Address Book" does not redirect to any page as expected ...

javascripthtmlcss