Change the Page layout when a button is clicked

Question

I want to change the layout of a page that has 3 columns:

... to 4 columns when a button is clicked:

I have no clue on how to do this.

user_18721948 · Answer

There are many ways you can add another div. Here is my approach :

function appendDiv(){
  let row = document.getElementsByClassName('row');
//   change className for all the col-md-4 div
  document.querySelectorAll('.col-md-4').forEach(function(item) {
   item.className = 'col-md-3';
  })
  //create new div;
  let col = document.createElement('div');
//   add classname to div
  col.className = "col-md-3"
  row[0].appendChild(col)
}

    .col-md-4{
  border : 1px solid blue;
      height : 20px;
}
    .col-md-3{
       border : 1px solid green;
      height : 20px;
    }

user_19817174 · Answer

There's a few ways this could be done depending on your data, however, here's one angle.

If you have both your 4 column & 3 column versions of the data loaded on the page (but one hidden with css). You could run something like this.

HTML

Javascript

const buttonEl = document.querySelector("#changeColumns");

buttonEl.addEventListener('click', () => {
  const outputEls = document.querySelectorAll('.displayArea')
  outputEls.forEach((outputEl) => {
    outputEl.toggle("show")
  })
});

CSS

.displayArea {
  display: none;
}

.displayArea.show {
  display: block;
}

user_11010112 · Answer

Use forEach and appendChild method.

const btn = document.querySelector('#btn')

btn.onclick = function() {
const targetClasses = document.querySelectorAll('.col-md-4')
targetClasses.forEach((tag, idx) => {
tag.className = 'col-md-3'

const lastIdx = targetClasses.length - 1
if (idx === lastIdx) {
const tag = document.createElement('div')
, row = document.querySelector('.row')
tag.className = 'col-md-3'
tag.innerText = '4'
row.appendChild(tag)
}
})

console.log(targetClasses)

return
}

user_8134422 · Answer

If you're only using vanilla HTML, CSS, and JavaScript, then one of the ways to achieve this is by adding a click listener to the button beforehand. FYI: for brevity's sake, I'll call the div element with row class as parent. When user clicks the button, then it should

remove col-md-4 class and add col-md-3 class to all the children elements of parent.
add a new div element with col-md-3 class into parent.

Here's a link to the codepen for your reference.

const button = document.querySelector('button');
const rowDiv = document.querySelector('.row');

button.addEventListener('click', (e) => {
  Array.from(rowDiv.children).forEach(childDiv => {
    childDiv.classList.remove('col-md-4');
    childDiv.classList.add('col-md-3');
  });
  const newDiv = document.createElement('div');
  newDiv.classList.add('col-md-3');
  rowDiv.appendChild(newDiv);
  
  // I disabled the button to prevent the user
  // from clicking it the second time.
  e.target.disabled = true;
});

.button-parent {
  margin: 15px 0;
}

.row {
  height: 100vh;
}

.row > div:nth-child(1) {
  background: red;
}

.row > div:nth-child(2) {
  background: blue;
}

.row > div:nth-child(3) {
  background: yellow;
}

.row > div:nth-child(4) {
  background: green;
}

Change the Page layout when a button is clicked

4 Answers