Задать вопрос
@kuramaa922
javascript

Как раскрыть блок по кнопке через JS?

Привет, хотел скрыть часть блока путём задания ему класса с определённой высотой при нажатии на кнопку, но высота не меняется.

<link rel="stylesheet" href="css/brands-style.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">

  <title>1.5</title>
</head>
<body>
  <div class="container">
    <section class="section">
      <h2 class="section__title">
        Ремонт техники различных брендов
      </h2>

      <!-- Slider main container -->
      <div class="swiper section__brands">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper section__wrapper">
          <!-- Slides -->
          <div class="swiper-slide section__item">
            <img src="img/svg/lenovo.svg" alt="lenovo">
            <button class="section__button button-service"></button>
          </div>

          <div class="swiper-slide section__item">
            <img src="img/svg/samsung.svg" alt="samsung">
            <button class="section__button button-service"></button>
          </div>

          <div class="swiper-slide section__item">
            <img src="img/svg/apple.svg" alt="apple">
            <button class="section__button button-service"></button>
          </div>

          <div class="swiper-slide section__item">
            <img src="img/svg/viewsonic.svg" alt="viewsonic">
            <button class="section__button button-service"></button>
          </div>

          <div class="swiper-slide section__item">
            <img src="img/svg/bosch.svg" alt="bosch">
            <button class="section__button button-service"></button>
          </div>

          <div class="swiper-slide section__item">
            <img src="img/svg/hp.svg" alt="hp">
            <button class="section__button button-service"></button>
          </div>

          <div class="swiper-slide section__item">
            <img src="img/svg/acer.svg" alt="acer">
            <button class="section__button button-service"></button>
          </div>

          <div class="swiper-slide section__item">
            <img src="img/svg/sony.svg" alt="sony">
            <button class="section__button button-service"></button>
          </div>

          <div class="swiper-slide section__item">
            <img src="img/svg/lenovo.svg" alt="lenovo">
            <button class="section__button button-service"></button>
          </div>

          <div class="swiper-slide section__item">
            <img src="img/svg/samsung.svg" alt="samsung">
            <button class="section__button button-service"></button>
          </div>

          <div class="swiper-slide section__item">
            <img src="img/svg/apple.svg" alt="apple">
            <button class="section__button button-service"></button>
          </div>
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>

        <button class="read-button" type="button">
          <span class="read-button__text">
            Показать все
          </span>
        </button>
      </div>
    </section>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
  <script src="brands.js"></script>
</body>


*,
*::after,
*::before {
  color: #000;
  list-style: none;
  padding: 0;
  margin: 0;
  text-decoration: none;
  outline: none;
  background: none;
  border: none;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

html,
body {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 16px;
  font-family: "TT Lakes", sans-serif;
  height: 100%;
  background: #F8F8F8;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.button-service {
  border: 2px solid #FF3E79;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

button:hover {
  opacity: 0.5;
  transition: 0.16s linear;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
}

/*------------SECTION---------------*/

.section {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #D9FFF5;
  background: #F8F8F8;
  overflow: hidden;
  min-width: 0;
}

.section__title {
  font-size: 16px;
  line-height: 1.5;
  text-transform: uppercase;
  color: #7E7E82;
  font-weight: normal;
  background: #ffffff;
}

.disclosed {
  height: auto;
}

.section__wrapper {
  display: flex;
  flex-wrap: wrap;
}

.section__item.swiper-slide {
  display: flex;
  background: #ffffff;
  align-items: center;
  justify-content: space-between;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  width: 206px;
  height: 70px;
  padding: 0 16px;
  border: 1px solid #EAEAEA;
}

.section__button::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  left: 30%;
  top: 35%;
  border-top: 2px solid #FF3E79;
  border-right: 2px solid #FF3E79;
  transform: rotate(45deg);
}

.read-button {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.read-button::before {
  content: url("../img/svg/hidden-text-icon.svg");
  margin-right: 16px;
}

.rotated::before {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}


.read-button__text {
  font-family: "TT Lakes", 'sans-serif';
  margin: 1px 0 1px 0;
  font-weight: 500;
  line-height: 1.5;
  font-size: 16px;
}

/*-------------SWIPER---------------*/

.swiper {
  width: 100%;
}

.swiper-wrapper {
}

.swiper-pagination .swiper-pagination-bullet-active{
  opacity: 0.4;
  background: #000;
}

.swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
}

/*----------MEDIA QUERIES-----------*/

/*-------MOBILE-------*/

@media screen and (min-width: 320px) and (max-width: 767px) {
  .container {
    min-width: 320px;
  }

  .section__title {
    padding: 16px;
  }

  .section__wrapper {
    flex-wrap: nowrap;
  }

  .swiper-wrapper {
    padding: 16px 0 0 16px;
    margin-bottom: 48px;
  }

  .read-button {
    display: none;
  }
}

/*--------TABLET--------*/

@media screen and (min-width: 768px) and (max-width: 1119px){
  .container {
    min-width: 768px;
  }

  .section__title {
    padding: 16px 0 16px 24px;
  }

  .section__wrapper {
    padding: 24px;
  }

  .section__item {
    margin: 0 24px 16px 0;
  }

  .section__item.swiper-slide {
    width: 190px;
  }

  .read-button {
    margin-left: 32px;
  }

}


const swiper = new Swiper('.swiper', {
    // Optional parameters
    slidesPerView: 'auto',
    mousewheel: true,

    breakpoints: {
        320: {
            spaceBetween: 16,
        },
        768: {
            spaceBetween: 0,
            enabled: false
        },
        1120: {
            spaceBetween: 0,
            enabled: false
        }
    },

    // If we need pagination
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },

});


const swiperContainer = document.querySelector('.section__brands')
const showBtn = document.querySelector('.read-button')
const textBtn = document.querySelector('.read-button__text')

showBtn.addEventListener('click', function () {
    let text

    swiperContainer.classList.toggle('disclosed')
    text = swiperContainer.classList.contains('disclosed')
        ? "Скрыть"
        : "Показать все"
    textBtn.textContent = text
    showBtn.classList.toggle('rotated')
})


Должно быть отображено 2 первых ряда до нажатия на "Показать все"
63a5dab8c412a367799060.png
  • Вопрос задан
  • 76 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
@bio_bot
Эсли я правильно понял код, то по моему ошибка в том что не задана изначальная высота у блока section__brands. Вы добавляете disclosed значение высоты авто, хотя по сути ваш класс уже имеет по умолчанию такое значение.
Попробуйте section__brands задать какую-то минимальную высоту
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
noder_ss
@noder_ss
Линуксоид-энтузиаст и SQL разработчик
Можно и без класса, а через elem.style.height = "50%"
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать блокчейн на golang
28 апр. 2024, в 17:10
20000 руб./за проект
100 лидов на сайт - нужен трафик
28 апр. 2024, в 15:00
100000 руб./за проект
Разработать сервер питон
28 апр. 2024, в 14:43
5000 руб./за проект
Ещё заказы