подскажите пожалуйста как можно сделать такой функционал. Есть список со статьями, изначально они расположены как блоки, но при клике на кнопку "Список", нужно чтобы данные блоки расположились списком
Внизу прикреплены картинки как пример
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуМожно сделать таким образом, просто меняет display
на другое значение, и далее добавляем зависимость дочерних элементов, от нового класса active
который добавляется родителю
document.querySelector('button').addEventListener('click', () => document.querySelector('.container').classList.toggle('active'))
.container {
display: flex;
width: 100%;
}
.container.active {
display: block;
}
.container.active .item {
display: flex;
align-items: center;
width: 100%;
}
.container.active .photo {
width: 50px;
height: 50px;
}
.item {
display: block;
width: 25%;
}
.photo {
width: 100%;
height: 60px;
}
.red {
background-color: red;
}
.black {
background-color: black;
}
.blue {
background-color: blue;
}
<div class="container">
<div class="item">
<div class="photo black"></div>
<div>текст</div>
</div>
<div class="item">
<div class="photo red"></div>
<div>текст2</div>
</div>
<div class="item">
<div class="photo blue"></div>
<div>текст3</div>
</div>
</div>
<button>click!</button>
Не претендую на галочку, просто хочу сверстать :)
$('.news-header .button').on('click', function(){
if(!$(this).hasClass('--grid')) {
$(this).removeClass('--list').addClass('--grid');
$('.news').removeClass('--grid').addClass('--list');
} else {
$(this).removeClass('--grid').addClass('--list');
$('.news').removeClass('--list').addClass('--grid');
}
});
body {
background: #f7f7f8;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
.news-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 10px;
}
.news-header .title {
font-size: 120%;
color: #7c7c7c;
}
.news-header .button {
display: inline-flex;
flex-direction: row;
align-items: center;
}
.news-header .button::before,
.news-header .button::after {
display: inline-block;
}
.news-header .button::before {
content: '';
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: center center;
background-size: 20px auto;
margin-right: 5px;
}
.news-header .button::after {
color: #216cc8;
}
.news-header .button.--list::before {
background-image: url('https://i.imgur.com/RZSOJ7w.png');
}
.news-header .button.--list::after {
content: 'Списком';
}
.news-header .button.--grid::before {
background-image: url('https://i.imgur.com/pgIDCFB.png');
}
.news-header .button.--grid::after {
content: 'Плиткой';
}
/* Общая настройка */
.news {
display: flex;
width: 100%;
}
.news .item {
display: flex;
background: #fff;
}
.news .item .image {
display: flex;
}
.news .item .image > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
}
.news .item .info {
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
}
.news .item .info > div:not(:last-child) {
margin-bottom: 10px;
}
.news .item .title {
font-weight: bold;
font-size: 110%;
}
.news .item .date {
color: #6f6f6f;
}
/* Стили для "Плиткой" */
.news.--grid {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.news.--grid .item {
flex-direction: column;
width: calc((100% - 30px) / 4);
}
.news.--grid .item:not(:nth-child(4n+4)) {
margin-right: 10px;
}
.news.--grid .item:not(:nth-last-child(-n+4)) {
margin-bottom: 10px;
}
.news.--grid .item .image {
height: 20vw;
max-height: 300px;
}
.news.--grid .item .info {
padding: 20px 10px;
}
/* Стили для "Списком" */
.news.--list {
flex-direction: column;
}
.news.--list .item {
flex-direction: row;
width: 100%;
}
.news.--list .item:not(:last-child) {
margin-bottom: 10px;
}
.news.--list .item .image {
width: auto;
flex: 1 0 auto;
height: 100px;
}
.news.--list .item .info {
flex-direction: column-reverse;
padding: 5px 10px;
}
.news.--list .item .info .date {
margin-bottom: 5px;
}
.news.--list .item .info .des {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="news-header">
<div class="title">Общество</div>
<div class="button --list"></div>
</div>
<div class="news --grid">
<div class="item">
<div class="image">
<img src="https://i.imgur.com/M1O6miS.png">
</div>
<div class="info">
<div class="title">10 причин приехать отдыхать в Бурятию на отпуск</div>
<div class="des">Рассказываем о главных особенностях Бурятии</div>
<div class="date">12 Мая 2020</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="https://i.imgur.com/Kcqipsd.png">
</div>
<div class="info">
<div class="title">Как будут развиваться пункты пропуска в Приморье</div>
<div class="des">Самое главное о том, в каких условиях будем жить в июне</div>
<div class="date">10 Мая 2020</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="https://i.imgur.com/6jU1lzJ.png">
</div>
<div class="info">
<div class="title">Как дистанционно оформить пособие по безработице</div>
<div class="des">Дальневосточники получат государственную поддержку</div>
<div class="date">4 Мая 2020</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="https://i.imgur.com/7vlU4D2.png">
</div>
<div class="info">
<div class="title">Подготовку к парадам Победы возобновили на Дальнем Востоке</div>
<div class="des">Шествие состоится в день празднования ВМФ России</div>
<div class="date">13 Мая 2020</div>
</div>
</div>
</div>
</div>