Здравствуйте. Есть страница с контентом. Нужно, чтобы блоки с текстом меняли положение с горизонтального на вертикального и обратно при нажатии на кнопку.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Лонгрид</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-container">
<div class="page-main">
<h1 id="main">Lorem ipsum</h1>
</div>
<div class="page-blocks" id="all page">
<div class="page-left">
<div class="page-left-up" id="block-element">
<div class="up-block">
</div>
<div class="block">
<p class="intro intro-up">
Заголовок 2 типа немного длиннее
</p>
</div>
</div>
<div class="block" id="block-element">
<button type="button" class="btn btn-outline-success intro" onclick="togFunc('text')">
<span>
С картинкой
</span>
</button>
</div>
</div>
<div class="block block-center" id="block-element">
<p class="intro">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Maiores, veritatis rem rerum deserunt quae, non atque labore
eveniet sint mollitia consequuntur sed nostrum nesciunt?
Excepturi illum totam quaerat consequatur asperiores mollitia,
eligendi cum eaque illo pariatur necessitatibus eum molestiae
temporibus itaque dicta inventore reiciendis. Mollitia in magni
nulla deleniti quasi?
</p>
</div>
<div id="text">
<img src="Plane.jpg" alt="" class="block-image">
</div>
</div>
</div>
<div class="settings">
<form>
<input type="text" placeholder="Установить ширину всего контейнера" class="input-page-width element">
<input type="text" placeholder="Установить ширину блока" class="input-width element">
<input type="text" placeholder="Установить высоту блока" class="input-height element">
</form>
<br>
<button class="set-width-btn element button">Применить</button>
<button class="fontSizePlus button">Увеличить шрифт (по умолчанию 16px)</button>
<button class="fontSizeMinus button">Уменьшить шрифт</button>
<button class="color button">Изменить цвет заголовка</button>
<button class="text-color button">Изменить цвет текста в блоках</button>
<button class="back-color button">Цвет 1 блока</button>
<button class="flex">Положение элементов</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
body {
font-size: 16px;
}
input {
width: 300px;
padding: 12px 18px;
}
button {
cursor: pointer;
}
.container {
max-width: 700px;
display: flex;
flex-direction: row;
}
.page-container {
display: flex;
flex-direction: column;
}
.up-block {
background-color: blue;
margin-top: 10px;
width: 50px;
height: 50px;
}
.page-left-up {
display: flex;
flex-direction: row;
white-space: normal;
min-width: 250px;
background-color: lightblue;
padding: 10px;
margin-top: 20px;
}
.intro-up {
margin-left: 20px;
}
.page-left {
display: flex;
flex-direction: column;
}
.btn {
width: 100%;
background-color: white;
padding: 20px;
text-align: left;
margin-top: 20px;
}
#main {
text-align: center;
}
.block-center {
width: 300px;
margin-left: 20px;
}
.page-blocks {
display: flex;
flex-direction: row;
}
.box {
float: left;
background: #f2f2f2;
border: 1px solid #ccc;
}
.block:not(:last-child) {
margin-right: 50px;
}
.block-image {
width: 200px;
height: 200px;
}
.settings {
width: 500px;
padding: 20px;
display: flex;
flex-direction: column;
height: 100%;
margin-left: 50px;
background-color: lightgrey;
}
.element:not(:last-child) {
margin-bottom: 20px;
}
.settings-font {
display: flex;
flex-direction: column;
}
.button {
background-color: white;
border-radius: 5px;
border: 1px solid black;
white-space: nowrap;
padding: 12px 18px;
color: black;
width: 340px;
}
button:not(:last-child) {
margin-bottom: 20px;
}
// Меняем положение элементов
function togFlex(id) {
elem = document.getElementById(id);
state = elem.style.flexDirection;
if (state = 'row') elem.style.flexDirection = 'column';
else elem.style.flexDirection = 'row';
}
const flex = document.querySelector('.flex');
flex.addEventListener('click', function () {
(flex.innerHTML === 'row') ?
flex.innerHTML = 'column' :
flex.innerHTML = 'row';
})
У класса .page-blocks при нажатии на кнопку должно меняться flex-direction с row на column и наоборот.
https://codepen.io/alexanderr-prog/pen/NWyvQJZ
В самом конце код js написал, но работает только изменение текста внутри кнопки, а блоки не меняют своего положения. Подскажите, как сделать, чтобы код заработал.
