How to make a slideshow using CSS Grid and JavascriptHow do JavaScript closures work?How do I remove a property from a JavaScript object?Set cellpadding and cellspacing in CSS?How do I redirect to another webpage?How do I include a JavaScript file in another JavaScript file?What does “use strict” do in JavaScript, and what is the reasoning behind it?How to check whether a string contains a substring in JavaScript?Change an HTML5 input's placeholder color with CSSHow do I remove a particular element from an array in JavaScript?Is it possible to apply CSS to half of a character?
Awk to get all my regular users in shadow
Does a humanoid possessed by a ghost register as undead to a paladin's Divine Sense?
How to increase Solr JVM memory
When using the Proficiency Dice optional rule, how should they be used in determining a character's Spell Save DC?
How can I perform a deterministic physics simulation?
Piece de Resistance - Introduction & Ace and A's
Why wasn't interlaced CRT scanning done back and forth?
How easy is it to get a gun illegally in the United States?
C# TCP server/client class
On the consistency of different well-polished astronomy software
What are the limitations of the Hendersson-Hasselbalch equation?
Why is it to say 'paucis post diebus'?
Is a switch from R to Python worth it?
Why does capacitance not depend on the material of the plates?
Did Logical Positivism fail because it simply denied human emotion?
foot-pounds of energy?
Is it okay to use different fingers every time while playing a song on keyboard? Is it considered a bad practice?
Four-velocity of radially infalling gas in Schwarzschild metric
Plotting Autoregressive Functions / Linear Difference Equations
Would this winged human/angel be able to fly?
How does Rust's 128-bit integer `i128` work on a 64-bit system?
Can the Cauchy product of divergent series with itself be convergent?
Is there a command-line tool for converting html files to pdf?
Formal mathematical definition of renormalization group flow
How to make a slideshow using CSS Grid and Javascript
How do JavaScript closures work?How do I remove a property from a JavaScript object?Set cellpadding and cellspacing in CSS?How do I redirect to another webpage?How do I include a JavaScript file in another JavaScript file?What does “use strict” do in JavaScript, and what is the reasoning behind it?How to check whether a string contains a substring in JavaScript?Change an HTML5 input's placeholder color with CSSHow do I remove a particular element from an array in JavaScript?Is it possible to apply CSS to half of a character?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
3
I'm trying to make a section in my website to show a picture and a paragraph with a heading depending on the selected button. For example, by clicking lunch, the lunch options show and the default breakfast options disappear.
I have been using CSS Grid and javascript to achieve this, however, when I click on the buttons the CSS Grid is lost and I am not sure why. I am using display none and block to show and hide each section.
let breakfastButton = document.getElementById('breakfastButton').addEventListener('click', showBreakfast);
let lunchButton = document.getElementById('lunchButton').addEventListener('click', showLunch);
// breakfast
function showBreakfast()
document.getElementById('breakfast').style.display = 'block';
document.getElementById('lunch').style.display = 'none';
// lunch
function showLunch()
document.getElementById('lunch').style.display = 'block';
document.getElementById('breakfast').style.display = 'none';
*
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
margin: 0 auto;
.container
padding: 1em;
line-height: 2em;
max-width: 1200px
h2
font-size: 2em;
font-weight: 300;
padding: 10px 0
p
font-size: 22px;
color: #707070;
font-weight: 300;
:root
--main--color: #FF4E4E;
--main--color--hover: rgb(250, 0, 0);
--nav--size: 1.5em;
--footer--size: 1.125em;
/* when to eat */
.meals
margin-top: 80px;
text-align: left;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
#lunch
display: none;
.button-container
margin-top: 30px;
width: 60%;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-gap: 20px;
.button-basics
background-color: var(--main--color);
width: 100px;
height: 30px;
border-radius: 20px;
color: white;
padding: 5px;
text-align: center;
.button-basics:hover
background-color: var(--main--color--hover);
cursor: pointer;
.meals>img
width: 100%;
<!-- meal times -->
<!-- breakfast -->
<div id="breakfast" class='meals'>
<img src="images/breakfast.jpg" alt="">
<div class="description">
<h2>Breakfast</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- lunch -->
<div id="lunch" class='meals'>
<img src="images/lunch.jpg" alt="">
<div class="description">
<h2>Lunch</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- meal buttons -->
<div class='button-container'>
<div id="breakfastButton" class='button-basics'>Breakfast</div>
<div id="lunchButton" class='button-basics'>Lunch</div>
<div class='button-basics'>Dinner</div>
<div class='button-basics'>Snacks</div>
</div>
</div>
As you can see, the top image is my desired end result, whereas the bottom image is what happens when I click the lunch button and not what I am trying to achieve.
javascript html css slideshow
asked Mar 27 at 2:47
Tyler MoralesTyler Morales
1378 bronze badges
add a comment |
3
I'm trying to make a section in my website to show a picture and a paragraph with a heading depending on the selected button. For example, by clicking lunch, the lunch options show and the default breakfast options disappear.
I have been using CSS Grid and javascript to achieve this, however, when I click on the buttons the CSS Grid is lost and I am not sure why. I am using display none and block to show and hide each section.
let breakfastButton = document.getElementById('breakfastButton').addEventListener('click', showBreakfast);
let lunchButton = document.getElementById('lunchButton').addEventListener('click', showLunch);
// breakfast
function showBreakfast()
document.getElementById('breakfast').style.display = 'block';
document.getElementById('lunch').style.display = 'none';
// lunch
function showLunch()
document.getElementById('lunch').style.display = 'block';
document.getElementById('breakfast').style.display = 'none';
*
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
margin: 0 auto;
.container
padding: 1em;
line-height: 2em;
max-width: 1200px
h2
font-size: 2em;
font-weight: 300;
padding: 10px 0
p
font-size: 22px;
color: #707070;
font-weight: 300;
:root
--main--color: #FF4E4E;
--main--color--hover: rgb(250, 0, 0);
--nav--size: 1.5em;
--footer--size: 1.125em;
/* when to eat */
.meals
margin-top: 80px;
text-align: left;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
#lunch
display: none;
.button-container
margin-top: 30px;
width: 60%;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-gap: 20px;
.button-basics
background-color: var(--main--color);
width: 100px;
height: 30px;
border-radius: 20px;
color: white;
padding: 5px;
text-align: center;
.button-basics:hover
background-color: var(--main--color--hover);
cursor: pointer;
.meals>img
width: 100%;
<!-- meal times -->
<!-- breakfast -->
<div id="breakfast" class='meals'>
<img src="images/breakfast.jpg" alt="">
<div class="description">
<h2>Breakfast</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- lunch -->
<div id="lunch" class='meals'>
<img src="images/lunch.jpg" alt="">
<div class="description">
<h2>Lunch</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- meal buttons -->
<div class='button-container'>
<div id="breakfastButton" class='button-basics'>Breakfast</div>
<div id="lunchButton" class='button-basics'>Lunch</div>
<div class='button-basics'>Dinner</div>
<div class='button-basics'>Snacks</div>
</div>
</div>
As you can see, the top image is my desired end result, whereas the bottom image is what happens when I click the lunch button and not what I am trying to achieve.
javascript html css slideshow
asked Mar 27 at 2:47
Tyler MoralesTyler Morales
1378 bronze badges
add a comment |
3
3
3
1
I'm trying to make a section in my website to show a picture and a paragraph with a heading depending on the selected button. For example, by clicking lunch, the lunch options show and the default breakfast options disappear.
I have been using CSS Grid and javascript to achieve this, however, when I click on the buttons the CSS Grid is lost and I am not sure why. I am using display none and block to show and hide each section.
let breakfastButton = document.getElementById('breakfastButton').addEventListener('click', showBreakfast);
let lunchButton = document.getElementById('lunchButton').addEventListener('click', showLunch);
// breakfast
function showBreakfast()
document.getElementById('breakfast').style.display = 'block';
document.getElementById('lunch').style.display = 'none';
// lunch
function showLunch()
document.getElementById('lunch').style.display = 'block';
document.getElementById('breakfast').style.display = 'none';
*
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
margin: 0 auto;
.container
padding: 1em;
line-height: 2em;
max-width: 1200px
h2
font-size: 2em;
font-weight: 300;
padding: 10px 0
p
font-size: 22px;
color: #707070;
font-weight: 300;
:root
--main--color: #FF4E4E;
--main--color--hover: rgb(250, 0, 0);
--nav--size: 1.5em;
--footer--size: 1.125em;
/* when to eat */
.meals
margin-top: 80px;
text-align: left;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
#lunch
display: none;
.button-container
margin-top: 30px;
width: 60%;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-gap: 20px;
.button-basics
background-color: var(--main--color);
width: 100px;
height: 30px;
border-radius: 20px;
color: white;
padding: 5px;
text-align: center;
.button-basics:hover
background-color: var(--main--color--hover);
cursor: pointer;
.meals>img
width: 100%;
<!-- meal times -->
<!-- breakfast -->
<div id="breakfast" class='meals'>
<img src="images/breakfast.jpg" alt="">
<div class="description">
<h2>Breakfast</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- lunch -->
<div id="lunch" class='meals'>
<img src="images/lunch.jpg" alt="">
<div class="description">
<h2>Lunch</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- meal buttons -->
<div class='button-container'>
<div id="breakfastButton" class='button-basics'>Breakfast</div>
<div id="lunchButton" class='button-basics'>Lunch</div>
<div class='button-basics'>Dinner</div>
<div class='button-basics'>Snacks</div>
</div>
</div>
As you can see, the top image is my desired end result, whereas the bottom image is what happens when I click the lunch button and not what I am trying to achieve.
javascript html css slideshow
asked Mar 27 at 2:47
Tyler MoralesTyler Morales
1378 bronze badges
I'm trying to make a section in my website to show a picture and a paragraph with a heading depending on the selected button. For example, by clicking lunch, the lunch options show and the default breakfast options disappear.
I have been using CSS Grid and javascript to achieve this, however, when I click on the buttons the CSS Grid is lost and I am not sure why. I am using display none and block to show and hide each section.
let breakfastButton = document.getElementById('breakfastButton').addEventListener('click', showBreakfast);
let lunchButton = document.getElementById('lunchButton').addEventListener('click', showLunch);
// breakfast
function showBreakfast()
document.getElementById('breakfast').style.display = 'block';
document.getElementById('lunch').style.display = 'none';
// lunch
function showLunch()
document.getElementById('lunch').style.display = 'block';
document.getElementById('breakfast').style.display = 'none';
*
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
margin: 0 auto;
.container
padding: 1em;
line-height: 2em;
max-width: 1200px
h2
font-size: 2em;
font-weight: 300;
padding: 10px 0
p
font-size: 22px;
color: #707070;
font-weight: 300;
:root
--main--color: #FF4E4E;
--main--color--hover: rgb(250, 0, 0);
--nav--size: 1.5em;
--footer--size: 1.125em;
/* when to eat */
.meals
margin-top: 80px;
text-align: left;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
#lunch
display: none;
.button-container
margin-top: 30px;
width: 60%;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-gap: 20px;
.button-basics
background-color: var(--main--color);
width: 100px;
height: 30px;
border-radius: 20px;
color: white;
padding: 5px;
text-align: center;
.button-basics:hover
background-color: var(--main--color--hover);
cursor: pointer;
.meals>img
width: 100%;
<!-- meal times -->
<!-- breakfast -->
<div id="breakfast" class='meals'>
<img src="images/breakfast.jpg" alt="">
<div class="description">
<h2>Breakfast</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- lunch -->
<div id="lunch" class='meals'>
<img src="images/lunch.jpg" alt="">
<div class="description">
<h2>Lunch</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- meal buttons -->
<div class='button-container'>
<div id="breakfastButton" class='button-basics'>Breakfast</div>
<div id="lunchButton" class='button-basics'>Lunch</div>
<div class='button-basics'>Dinner</div>
<div class='button-basics'>Snacks</div>
</div>
</div>
As you can see, the top image is my desired end result, whereas the bottom image is what happens when I click the lunch button and not what I am trying to achieve.
let breakfastButton = document.getElementById('breakfastButton').addEventListener('click', showBreakfast);
let lunchButton = document.getElementById('lunchButton').addEventListener('click', showLunch);
// breakfast
function showBreakfast()
document.getElementById('breakfast').style.display = 'block';
document.getElementById('lunch').style.display = 'none';
// lunch
function showLunch()
document.getElementById('lunch').style.display = 'block';
document.getElementById('breakfast').style.display = 'none';
*
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
margin: 0 auto;
.container
padding: 1em;
line-height: 2em;
max-width: 1200px
h2
font-size: 2em;
font-weight: 300;
padding: 10px 0
p
font-size: 22px;
color: #707070;
font-weight: 300;
:root
--main--color: #FF4E4E;
--main--color--hover: rgb(250, 0, 0);
--nav--size: 1.5em;
--footer--size: 1.125em;
/* when to eat */
.meals
margin-top: 80px;
text-align: left;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
#lunch
display: none;
.button-container
margin-top: 30px;
width: 60%;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-gap: 20px;
.button-basics
background-color: var(--main--color);
width: 100px;
height: 30px;
border-radius: 20px;
color: white;
padding: 5px;
text-align: center;
.button-basics:hover
background-color: var(--main--color--hover);
cursor: pointer;
.meals>img
width: 100%;
<!-- meal times -->
<!-- breakfast -->
<div id="breakfast" class='meals'>
<img src="images/breakfast.jpg" alt="">
<div class="description">
<h2>Breakfast</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- lunch -->
<div id="lunch" class='meals'>
<img src="images/lunch.jpg" alt="">
<div class="description">
<h2>Lunch</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- meal buttons -->
<div class='button-container'>
<div id="breakfastButton" class='button-basics'>Breakfast</div>
<div id="lunchButton" class='button-basics'>Lunch</div>
<div class='button-basics'>Dinner</div>
<div class='button-basics'>Snacks</div>
</div>
</div>let breakfastButton = document.getElementById('breakfastButton').addEventListener('click', showBreakfast);
let lunchButton = document.getElementById('lunchButton').addEventListener('click', showLunch);
// breakfast
function showBreakfast()
document.getElementById('breakfast').style.display = 'block';
document.getElementById('lunch').style.display = 'none';
// lunch
function showLunch()
document.getElementById('lunch').style.display = 'block';
document.getElementById('breakfast').style.display = 'none';
*
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
margin: 0 auto;
.container
padding: 1em;
line-height: 2em;
max-width: 1200px
h2
font-size: 2em;
font-weight: 300;
padding: 10px 0
p
font-size: 22px;
color: #707070;
font-weight: 300;
:root
--main--color: #FF4E4E;
--main--color--hover: rgb(250, 0, 0);
--nav--size: 1.5em;
--footer--size: 1.125em;
/* when to eat */
.meals
margin-top: 80px;
text-align: left;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
#lunch
display: none;
.button-container
margin-top: 30px;
width: 60%;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-gap: 20px;
.button-basics
background-color: var(--main--color);
width: 100px;
height: 30px;
border-radius: 20px;
color: white;
padding: 5px;
text-align: center;
.button-basics:hover
background-color: var(--main--color--hover);
cursor: pointer;
.meals>img
width: 100%;
<!-- meal times -->
<!-- breakfast -->
<div id="breakfast" class='meals'>
<img src="images/breakfast.jpg" alt="">
<div class="description">
<h2>Breakfast</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- lunch -->
<div id="lunch" class='meals'>
<img src="images/lunch.jpg" alt="">
<div class="description">
<h2>Lunch</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- meal buttons -->
<div class='button-container'>
<div id="breakfastButton" class='button-basics'>Breakfast</div>
<div id="lunchButton" class='button-basics'>Lunch</div>
<div class='button-basics'>Dinner</div>
<div class='button-basics'>Snacks</div>
</div>
</div>javascript html css slideshow
javascript html css slideshow
asked Mar 27 at 2:47
Tyler MoralesTyler Morales
1378 bronze badges
asked Mar 27 at 2:47
Tyler MoralesTyler Morales
1378 bronze badges
asked Mar 27 at 2:47
Tyler MoralesTyler Morales
1378 bronze badges
asked Mar 27 at 2:47
Tyler MoralesTyler Morales
1378 bronze badges
asked Mar 27 at 2:47
Tyler MoralesTyler Morales
1378 bronze badges
1378 bronze badges
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
Ok, this should be a very easy fix. Check out the updated showBreakfast() and showLunch() functions. On show, instead of changing the display property to block you wanted to change them to grid, maintaining the desired layout. By changing the display property to block you were blowing up your layout. Run the snippet, you will smile.
let breakfastButton = document.getElementById('breakfastButton').addEventListener('click', showBreakfast);
let lunchButton = document.getElementById('lunchButton').addEventListener('click', showLunch);
// breakfast
function showBreakfast()
document.getElementById('breakfast').style.display = 'grid';
document.getElementById('lunch').style.display = 'none';
// lunch
function showLunch()
document.getElementById('lunch').style.display = 'grid';
document.getElementById('breakfast').style.display = 'none';
*
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
margin: 0 auto;
.container
padding: 1em;
line-height: 2em;
max-width: 1200px
h2
font-size: 2em;
font-weight: 300;
padding: 10px 0
p
font-size: 22px;
color: #707070;
font-weight: 300;
:root
--main--color: #FF4E4E;
--main--color--hover: rgb(250, 0, 0);
--nav--size: 1.5em;
--footer--size: 1.125em;
/* when to eat */
.meals
margin-top: 80px;
text-align: left;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
#lunch
display: none;
.button-container
margin-top: 30px;
width: 60%;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-gap: 20px;
.button-basics
background-color: var(--main--color);
width: 100px;
height: 30px;
border-radius: 20px;
color: white;
padding: 5px;
text-align: center;
.button-basics:hover
background-color: var(--main--color--hover);
cursor: pointer;
.meals>img
width: 100%;
<!-- meal times -->
<!-- breakfast -->
<div id="breakfast" class='meals'>
<img src="images/breakfast.jpg" alt="">
<div class="description">
<h2>Breakfast</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- lunch -->
<div id="lunch" class='meals'>
<img src="images/lunch.jpg" alt="">
<div class="description">
<h2>Lunch</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- meal buttons -->
<div class='button-container'>
<div id="breakfastButton" class='button-basics'>Breakfast</div>
<div id="lunchButton" class='button-basics'>Lunch</div>
<div class='button-basics'>Dinner</div>
<div class='button-basics'>Snacks</div>
</div>
</div>answered Mar 27 at 3:05
BugsArePeopleTooBugsArePeopleToo
1,9921 gold badge9 silver badges12 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55369045%2fhow-to-make-a-slideshow-using-css-grid-and-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Ok, this should be a very easy fix. Check out the updated showBreakfast() and showLunch() functions. On show, instead of changing the display property to block you wanted to change them to grid, maintaining the desired layout. By changing the display property to block you were blowing up your layout. Run the snippet, you will smile.
let breakfastButton = document.getElementById('breakfastButton').addEventListener('click', showBreakfast);
let lunchButton = document.getElementById('lunchButton').addEventListener('click', showLunch);
// breakfast
function showBreakfast()
document.getElementById('breakfast').style.display = 'grid';
document.getElementById('lunch').style.display = 'none';
// lunch
function showLunch()
document.getElementById('lunch').style.display = 'grid';
document.getElementById('breakfast').style.display = 'none';
*
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
margin: 0 auto;
.container
padding: 1em;
line-height: 2em;
max-width: 1200px
h2
font-size: 2em;
font-weight: 300;
padding: 10px 0
p
font-size: 22px;
color: #707070;
font-weight: 300;
:root
--main--color: #FF4E4E;
--main--color--hover: rgb(250, 0, 0);
--nav--size: 1.5em;
--footer--size: 1.125em;
/* when to eat */
.meals
margin-top: 80px;
text-align: left;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
#lunch
display: none;
.button-container
margin-top: 30px;
width: 60%;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-gap: 20px;
.button-basics
background-color: var(--main--color);
width: 100px;
height: 30px;
border-radius: 20px;
color: white;
padding: 5px;
text-align: center;
.button-basics:hover
background-color: var(--main--color--hover);
cursor: pointer;
.meals>img
width: 100%;
<!-- meal times -->
<!-- breakfast -->
<div id="breakfast" class='meals'>
<img src="images/breakfast.jpg" alt="">
<div class="description">
<h2>Breakfast</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- lunch -->
<div id="lunch" class='meals'>
<img src="images/lunch.jpg" alt="">
<div class="description">
<h2>Lunch</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- meal buttons -->
<div class='button-container'>
<div id="breakfastButton" class='button-basics'>Breakfast</div>
<div id="lunchButton" class='button-basics'>Lunch</div>
<div class='button-basics'>Dinner</div>
<div class='button-basics'>Snacks</div>
</div>
</div>answered Mar 27 at 3:05
BugsArePeopleTooBugsArePeopleToo
1,9921 gold badge9 silver badges12 bronze badges
add a comment |
2
Ok, this should be a very easy fix. Check out the updated showBreakfast() and showLunch() functions. On show, instead of changing the display property to block you wanted to change them to grid, maintaining the desired layout. By changing the display property to block you were blowing up your layout. Run the snippet, you will smile.
let breakfastButton = document.getElementById('breakfastButton').addEventListener('click', showBreakfast);
let lunchButton = document.getElementById('lunchButton').addEventListener('click', showLunch);
// breakfast
function showBreakfast()
document.getElementById('breakfast').style.display = 'grid';
document.getElementById('lunch').style.display = 'none';
// lunch
function showLunch()
document.getElementById('lunch').style.display = 'grid';
document.getElementById('breakfast').style.display = 'none';
*
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
margin: 0 auto;
.container
padding: 1em;
line-height: 2em;
max-width: 1200px
h2
font-size: 2em;
font-weight: 300;
padding: 10px 0
p
font-size: 22px;
color: #707070;
font-weight: 300;
:root
--main--color: #FF4E4E;
--main--color--hover: rgb(250, 0, 0);
--nav--size: 1.5em;
--footer--size: 1.125em;
/* when to eat */
.meals
margin-top: 80px;
text-align: left;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
#lunch
display: none;
.button-container
margin-top: 30px;
width: 60%;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-gap: 20px;
.button-basics
background-color: var(--main--color);
width: 100px;
height: 30px;
border-radius: 20px;
color: white;
padding: 5px;
text-align: center;
.button-basics:hover
background-color: var(--main--color--hover);
cursor: pointer;
.meals>img
width: 100%;
<!-- meal times -->
<!-- breakfast -->
<div id="breakfast" class='meals'>
<img src="images/breakfast.jpg" alt="">
<div class="description">
<h2>Breakfast</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- lunch -->
<div id="lunch" class='meals'>
<img src="images/lunch.jpg" alt="">
<div class="description">
<h2>Lunch</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- meal buttons -->
<div class='button-container'>
<div id="breakfastButton" class='button-basics'>Breakfast</div>
<div id="lunchButton" class='button-basics'>Lunch</div>
<div class='button-basics'>Dinner</div>
<div class='button-basics'>Snacks</div>
</div>
</div>answered Mar 27 at 3:05
BugsArePeopleTooBugsArePeopleToo
1,9921 gold badge9 silver badges12 bronze badges
add a comment |
2
2
2
Ok, this should be a very easy fix. Check out the updated showBreakfast() and showLunch() functions. On show, instead of changing the display property to block you wanted to change them to grid, maintaining the desired layout. By changing the display property to block you were blowing up your layout. Run the snippet, you will smile.
let breakfastButton = document.getElementById('breakfastButton').addEventListener('click', showBreakfast);
let lunchButton = document.getElementById('lunchButton').addEventListener('click', showLunch);
// breakfast
function showBreakfast()
document.getElementById('breakfast').style.display = 'grid';
document.getElementById('lunch').style.display = 'none';
// lunch
function showLunch()
document.getElementById('lunch').style.display = 'grid';
document.getElementById('breakfast').style.display = 'none';
*
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
margin: 0 auto;
.container
padding: 1em;
line-height: 2em;
max-width: 1200px
h2
font-size: 2em;
font-weight: 300;
padding: 10px 0
p
font-size: 22px;
color: #707070;
font-weight: 300;
:root
--main--color: #FF4E4E;
--main--color--hover: rgb(250, 0, 0);
--nav--size: 1.5em;
--footer--size: 1.125em;
/* when to eat */
.meals
margin-top: 80px;
text-align: left;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
#lunch
display: none;
.button-container
margin-top: 30px;
width: 60%;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-gap: 20px;
.button-basics
background-color: var(--main--color);
width: 100px;
height: 30px;
border-radius: 20px;
color: white;
padding: 5px;
text-align: center;
.button-basics:hover
background-color: var(--main--color--hover);
cursor: pointer;
.meals>img
width: 100%;
<!-- meal times -->
<!-- breakfast -->
<div id="breakfast" class='meals'>
<img src="images/breakfast.jpg" alt="">
<div class="description">
<h2>Breakfast</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- lunch -->
<div id="lunch" class='meals'>
<img src="images/lunch.jpg" alt="">
<div class="description">
<h2>Lunch</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- meal buttons -->
<div class='button-container'>
<div id="breakfastButton" class='button-basics'>Breakfast</div>
<div id="lunchButton" class='button-basics'>Lunch</div>
<div class='button-basics'>Dinner</div>
<div class='button-basics'>Snacks</div>
</div>
</div>answered Mar 27 at 3:05
BugsArePeopleTooBugsArePeopleToo
1,9921 gold badge9 silver badges12 bronze badges
Ok, this should be a very easy fix. Check out the updated showBreakfast() and showLunch() functions. On show, instead of changing the display property to block you wanted to change them to grid, maintaining the desired layout. By changing the display property to block you were blowing up your layout. Run the snippet, you will smile.
let breakfastButton = document.getElementById('breakfastButton').addEventListener('click', showBreakfast);
let lunchButton = document.getElementById('lunchButton').addEventListener('click', showLunch);
// breakfast
function showBreakfast()
document.getElementById('breakfast').style.display = 'grid';
document.getElementById('lunch').style.display = 'none';
// lunch
function showLunch()
document.getElementById('lunch').style.display = 'grid';
document.getElementById('breakfast').style.display = 'none';
*
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
margin: 0 auto;
.container
padding: 1em;
line-height: 2em;
max-width: 1200px
h2
font-size: 2em;
font-weight: 300;
padding: 10px 0
p
font-size: 22px;
color: #707070;
font-weight: 300;
:root
--main--color: #FF4E4E;
--main--color--hover: rgb(250, 0, 0);
--nav--size: 1.5em;
--footer--size: 1.125em;
/* when to eat */
.meals
margin-top: 80px;
text-align: left;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
#lunch
display: none;
.button-container
margin-top: 30px;
width: 60%;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-gap: 20px;
.button-basics
background-color: var(--main--color);
width: 100px;
height: 30px;
border-radius: 20px;
color: white;
padding: 5px;
text-align: center;
.button-basics:hover
background-color: var(--main--color--hover);
cursor: pointer;
.meals>img
width: 100%;
<!-- meal times -->
<!-- breakfast -->
<div id="breakfast" class='meals'>
<img src="images/breakfast.jpg" alt="">
<div class="description">
<h2>Breakfast</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- lunch -->
<div id="lunch" class='meals'>
<img src="images/lunch.jpg" alt="">
<div class="description">
<h2>Lunch</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- meal buttons -->
<div class='button-container'>
<div id="breakfastButton" class='button-basics'>Breakfast</div>
<div id="lunchButton" class='button-basics'>Lunch</div>
<div class='button-basics'>Dinner</div>
<div class='button-basics'>Snacks</div>
</div>
</div>let breakfastButton = document.getElementById('breakfastButton').addEventListener('click', showBreakfast);
let lunchButton = document.getElementById('lunchButton').addEventListener('click', showLunch);
// breakfast
function showBreakfast()
document.getElementById('breakfast').style.display = 'grid';
document.getElementById('lunch').style.display = 'none';
// lunch
function showLunch()
document.getElementById('lunch').style.display = 'grid';
document.getElementById('breakfast').style.display = 'none';
*
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
margin: 0 auto;
.container
padding: 1em;
line-height: 2em;
max-width: 1200px
h2
font-size: 2em;
font-weight: 300;
padding: 10px 0
p
font-size: 22px;
color: #707070;
font-weight: 300;
:root
--main--color: #FF4E4E;
--main--color--hover: rgb(250, 0, 0);
--nav--size: 1.5em;
--footer--size: 1.125em;
/* when to eat */
.meals
margin-top: 80px;
text-align: left;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
#lunch
display: none;
.button-container
margin-top: 30px;
width: 60%;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-gap: 20px;
.button-basics
background-color: var(--main--color);
width: 100px;
height: 30px;
border-radius: 20px;
color: white;
padding: 5px;
text-align: center;
.button-basics:hover
background-color: var(--main--color--hover);
cursor: pointer;
.meals>img
width: 100%;
<!-- meal times -->
<!-- breakfast -->
<div id="breakfast" class='meals'>
<img src="images/breakfast.jpg" alt="">
<div class="description">
<h2>Breakfast</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- lunch -->
<div id="lunch" class='meals'>
<img src="images/lunch.jpg" alt="">
<div class="description">
<h2>Lunch</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- meal buttons -->
<div class='button-container'>
<div id="breakfastButton" class='button-basics'>Breakfast</div>
<div id="lunchButton" class='button-basics'>Lunch</div>
<div class='button-basics'>Dinner</div>
<div class='button-basics'>Snacks</div>
</div>
</div>let breakfastButton = document.getElementById('breakfastButton').addEventListener('click', showBreakfast);
let lunchButton = document.getElementById('lunchButton').addEventListener('click', showLunch);
// breakfast
function showBreakfast()
document.getElementById('breakfast').style.display = 'grid';
document.getElementById('lunch').style.display = 'none';
// lunch
function showLunch()
document.getElementById('lunch').style.display = 'grid';
document.getElementById('breakfast').style.display = 'none';
*
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
margin: 0 auto;
.container
padding: 1em;
line-height: 2em;
max-width: 1200px
h2
font-size: 2em;
font-weight: 300;
padding: 10px 0
p
font-size: 22px;
color: #707070;
font-weight: 300;
:root
--main--color: #FF4E4E;
--main--color--hover: rgb(250, 0, 0);
--nav--size: 1.5em;
--footer--size: 1.125em;
/* when to eat */
.meals
margin-top: 80px;
text-align: left;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
#lunch
display: none;
.button-container
margin-top: 30px;
width: 60%;
/* grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-gap: 20px;
.button-basics
background-color: var(--main--color);
width: 100px;
height: 30px;
border-radius: 20px;
color: white;
padding: 5px;
text-align: center;
.button-basics:hover
background-color: var(--main--color--hover);
cursor: pointer;
.meals>img
width: 100%;
<!-- meal times -->
<!-- breakfast -->
<div id="breakfast" class='meals'>
<img src="images/breakfast.jpg" alt="">
<div class="description">
<h2>Breakfast</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- lunch -->
<div id="lunch" class='meals'>
<img src="images/lunch.jpg" alt="">
<div class="description">
<h2>Lunch</h2>
<p>The most important meal of the day, right? Not
exactly. Since you are an athlete training and
eating constantly, breakfast can possibly mean
twice a day depending on your workouts. However,
it is still hugely important to refuel after any
early morning workouts with a filling and hearty
meal
</p>
</div>
</div>
<!-- meal buttons -->
<div class='button-container'>
<div id="breakfastButton" class='button-basics'>Breakfast</div>
<div id="lunchButton" class='button-basics'>Lunch</div>
<div class='button-basics'>Dinner</div>
<div class='button-basics'>Snacks</div>
</div>
</div>answered Mar 27 at 3:05
BugsArePeopleTooBugsArePeopleToo
1,9921 gold badge9 silver badges12 bronze badges
answered Mar 27 at 3:05
BugsArePeopleTooBugsArePeopleToo
1,9921 gold badge9 silver badges12 bronze badges
answered Mar 27 at 3:05
BugsArePeopleTooBugsArePeopleToo
1,9921 gold badge9 silver badges12 bronze badges
answered Mar 27 at 3:05
BugsArePeopleTooBugsArePeopleToo
1,9921 gold badge9 silver badges12 bronze badges
1,9921 gold badge9 silver badges12 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55369045%2fhow-to-make-a-slideshow-using-css-grid-and-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
