Коробка, которая раскрывается в галерее

Я пытаюсь понять, как расширить коробку по размеру некоторых коробок внутри «галереи». Мне нужно, чтобы это не запутало ни другие поля, ни другие элементы страницы. Он должен расширяться и разрушаться. Есть восемь блоков, и когда я нажимаю на один из них, он должен занимать пространство всех восьми блоков, когда я снова нажимаю на него, он должен схлопываться до исходного размера с одним блоком. Он также должен отображать разное содержимое для каждого поля при раскрытии.

Я пытался использовать целевые свойства css и теги привязки. Какое решение вы бы использовали, ребята?

вот моя пробная версия кода:

<a href = "#odontopediatria">
    <div class = "trat-card">
        <div class = "trat-icone"><i class = "fas fa-tooth"></i></div>
        <div class = "trat-titulo">Odontopediatria</div>
    </div>
    <a href = "#_" class = "lightbox" id = "odontopediatria">
        <div class = "lightbox-conteudo">
            <div class = "trat-texto">
                <i class = "fas fa-tooth fa-3x"></i>
                <p>Odontopediatria é a especialidade que tem como objetivo o diagnóstico, a prevenção, o tratamento e o controle dos problemas de saúde bucal do bebê, da criança e do adolescente.
                </p>
            </div>
        </div>
    </a>
</a>


    
.lightbox {
  text-align: center;
  color: white;
  font-size: 22px;
  display: none;
}

.lightbox:target {
  display: block;
  top: 0;
}

.lightbox div:nth-child(n) {
  position: absolute;
    left: 0;
  display: flex;
    flex-direction: column;
    width: 100%;
    height: 306px;
    border-radius: 4px;
    align-items: center;
    justify-content: space-around;
  padding: 30px;
  margin: 0 auto;
}

Я бы использовал position: absolute + javascript

— 13.12.2020 17:14

Вы используете встроенный a-тег в другом a-теге, что является недопустимым вариантом использования.

— 15.12.2020 19:13

javascript html css

13.12.2020 16:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

151

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

попробуй что-нибудь вроде этого

  .container{
    display: flex;
    height: 400px;
    width: 600px;
    position: relative;
    flex-wrap: wrap;

  }
  .box{
    flex: 0 0 200px;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
  }
  .box:active{
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
  }
  .box.box1{
    background-color: red;
  }
  .box.box2{
    background-color: greenyellow;
  }
  .box.box4{
    background-color: blue;
  }
  .box.box5{
    background-color: red;
  }
  .box.box6{
    background-color: yellow;
  }
  .box.box3{
    background-color: orange;
  }
  .box1:active::after{
    content: 'some text for the box1';
      flex: 0 0 100%;
  }
  .box2:active::after{
    content: 'some text for the box2';
      flex: 0 0 100%;
  }
  .box3:active::after{
    content: 'some text for the box3';
      flex: 0 0 100%;
  }
  .box4:active::after{
    content: 'differnt text for box 4';
      flex: 0 0 100%;
  }
  .box5:active::after{
    content: 'hello there';
      flex: 0 0 100%;
  }
  .box6:active::after{
    content: 'ciao bello';
      flex: 0 0 100%;
  }
  a{
      flex: 0 0 100%;
  }

  <div class = "container">
    <div class = "box box2"><a>box1</a></div>
    <div class = "box box1"><a>box2</a></div>
    <div class = "box box3"><a>box2</a></div>
    <div class = "box box4"><a>box2</a></div>
    <div class = "box box5"><a>box2</a></div>
    <div class = "box box6"><a>box2</a></div>
  </div>

если вам нужно, чтобы они оставались открытыми, используйте Js для передачи flex: 0 0 100% по событию клика. Вы можете использовать класс переключения

— 16.12.2020 03:17

Большое спасибо. Я очень ценю ваше время для этого.

— 16.12.2020 19:01

16.12.2020 03:02

Ответ принят как подходящий

Это демонстрация того, что вы хотите, я использую небольшой код jQuery для управления переключаемым классом, который помогает сделать CSS для расширения маленького окна до большого.

$(document).ready(function() {
  $(".expandable_box").click(function() {
    $(this).parent(".main_col").toggleClass("expanded");
  });
});

body {
  margin: 0px;
}

* {
  box-sizing: border-box;
}

.main_container {
  padding: 0px 5px;
}

.main_row {
  display: flex;
  flex-wrap: wrap;
  margin: 0px -5px;
  position: relative;
}

.main_col {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0px 5px;
  margin: 5px 0px;
  text-align: center;
}

.main_col.expanded {
  position: absolute;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.expandable_box {
  padding: 30px;
  background-color: #3ca6b6;
  color: #fff;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.expanded .expandable_box {
  min-height: 100%;
  background-color: #0c798a;
}

.expandable_box h4 {
  margin: 20px 0px 0px;
}

.expandable_box p {
  display: none;
  margin: 0px;
  padding: 15px 0px 0px;
  visibility: hidden;
  opacity: 0;
}

.expanded .expandable_box p {
  display: block;
  visibility: visible;
  opacity: 1;
}

@media(max-width: 991px) {
  .main_col {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Same Place Expander</title>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
</head>

<body>
  <div class = "main_container">
    <div class = "main_row">
      <div class = "main_col">
        <a href = "javascript:void(0);" class = "expandable_box">
          <i class = "fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class = "main_col">
        <a href = "javascript:void(0);" class = "expandable_box">
          <i class = "fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class = "main_col">
        <a href = "javascript:void(0);" class = "expandable_box">
          <i class = "fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class = "main_col">
        <a href = "javascript:void(0);" class = "expandable_box">
          <i class = "fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class = "main_col">
        <a href = "javascript:void(0);" class = "expandable_box">
          <i class = "fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class = "main_col">
        <a href = "javascript:void(0);" class = "expandable_box">
          <i class = "fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class = "main_col">
        <a href = "javascript:void(0);" class = "expandable_box">
          <i class = "fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class = "main_col">
        <a href = "javascript:void(0);" class = "expandable_box">
          <i class = "fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
    </div>
  </div>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://kit.fontawesome.com/a35ed2bddb.js" crossorigin = "anonymous"></script>
</body>

</html>

16.12.2020 10:53

Другие вопросы по теме

Как я могу добавить шрифт Hinglish в HTML?

Как я могу перенаправить администратора и пользователя на их страницы?

Форма оверлея Bootstrap spinner (не вся страница)

Как выполнить цикл и итерацию скрипта в R?

Как я могу изменить цвет фона выпадающего меню bootstrap 3 после щелчка?

HTML-Javascript: относительно нетрадиционного назначения <param /> внутри <object>

Как округлить целое число до ближайших 15 в PHP

Добавить дополнение к последнему дочернему элементу, если присутствует только 2

Сделать блоки элементов списка с пробелом CSS

Кнопка с полем ввода не хочет выравниваться по правому углу

Коробка, которая раскрывается в галерее

Ответы 2

Другие вопросы по теме

Похожие вопросы