Change vertically located blocks in places
| The challenge | |
| HTML | |
| CSS | |
| JavaScript |
The challenge
You need to change the blocks that are located vertically. This is easier to do by rotating properties.
table-header-groop and table-footer-group, but if more than two blocks are not enough.
First, let’s look at how to do this by pressing a button.
HTML
<button id="remove_adv_button">Remove ads</button>
<button id="show_adv_button">Show ads</button>
<div id="rb-content-articles">One<div>
<div id="rb-related-articles">Two<div>
<div id="rb-first-adv">Three<div>
<div id="rb-second-adv">Four<div>
CSS
<style>
#remove_adv_button,#show_adv_button {width:100%;font-size:1.2rem;}
#show_adv_button {display: none;}
.rb_grid {
display: grid;
grid-template-columns: 100%;
}
.rb-first-adv {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.rb-content-articles {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
.rb-second-adv {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 5;
grid-row-end: 6;
}
.rb-related-articles {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 7;
grid-row-end: 8;
}
</style>
JavaScript
let remove_adv_button = document.getElementById('remove_adv_button');
let show_adv_button = document.getElementById('show_adv_button');
let r_content_articles = document.getElementById('rb-content-articles');
let r_related_articles = document.getElementById('rb-related-articles');
let r_first_adv = document.getElementById('rb-first-adv');
let r_second_adv = document.getElementById('rb-second-adv');
remove_adv_button.addEventListener('click', () => {
console.log("remove adv button clicked");
r_content_articles.style.gridRowStart = "1";
r_content_articles.style.gridRowEnd = "2";
r_related_articles.style.gridRowStart = "3";
r_related_articles.style.gridRowEnd = "4";
r_first_adv.style.gridRowStart = "5";
r_first_adv.style.gridRowEnd = "6";
r_second_adv.style.gridRowStart = "7";
r_second_adv.style.gridRowEnd = "8";
show_adv_button.style.display = "block";
remove_adv_button.style.display = "none";
});
show_adv_button.addEventListener('click', () => {
console.log("show adv button clicked");
r_content_articles.style.gridRowStart = "3";
r_content_articles.style.gridRowEnd = "4";
r_related_articles.style.gridRowStart = "7";
r_related_articles.style.gridRowEnd = "8";
r_first_adv.style.gridRowStart = "1";
r_first_adv.style.gridRowEnd = "2";
r_second_adv.style.gridRowStart = "5";
r_second_adv.style.gridRowEnd = "6";
show_adv_button.style.display = "none";
remove_adv_button.style.display = "block";
});
Article author: Andrei Olegovich