#javascript #html #css
Вопрос:
В настоящее время я работаю над веб-сайтом портфолио, использующим HTML, CSS и ванильный JavaScript, и я работаю над некоторыми разделами, которые сворачиваются при нажатии. Как вы можете видеть в фрагменте кода, сворачивающиеся разделы находятся один над другим. Вместо этого я хотел бы сделать кнопки рядом, но я понятия не имею, как это сделать. Я довольно новичок в этих языках, так как начал заниматься ими всего месяц назад.
document.querySelectorAll(".collapse__button").forEach(button =gt;{ button.addEventListener("click", () =gt;{ const collapseContent = button.nextElementSibling; button.classList.toggle("collapse__button--active"); if (button.classList.contains("collapse__button--active")){ collapseContent.style.maxHeight = collapseContent.scrollHeight "px"; }else{ collapseContent.style.maxHeight = 0; } }); }); .collapse__button { /* display: inline-block; */ padding: 1em 2em ; background: var(--clr-dark); color: var(--clr-light); text-decoration: none; cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: 2px; font-weight: var(--fw-bold); transition: transform 200ms ease-in-out; max-width: 200px; margin: 5em 5em; border: 8px var(--clr-accent); border-radius: 20px; } .collapse__button:hover{ transform: scale(1.1); background: var(--clr-accent); } .collapse__button::after{ content: "25be"; float: right; transform: scale(1); } .collapse__content{ overflow: hidden; max-height: 0; transition: max-height 0.2s; padding: 0 15px; } .collapse__button--active::after{ content: "25b4"; } .Title{ text-align: center; } lt;section class = "Title"gt; lt;pgt; Title of Examplelt;/pgt; lt;div class = "collapse"gt; lt;button class = "collapse__button"gt; Example 1 lt;/buttongt; lt;div class="collapse__content"gt; lt;pgt; writing lt;/pgt; lt;/divgt; lt;/divgt; lt;div class = "collapse"gt; lt;button class = "collapse__button"gt; Example 2 lt;/buttongt; lt;div class="collapse__content"gt; lt;pgt; more writing lt;/pgt; lt;/divgt; lt;/divgt; Ответ №1:
You can use display:table for this if you do not want to use Flexbox.
дисплей:таблица работает следующим образом: 
Он работает как настоящая таблица; однако таблицы имеют семантическое значение, и их не следует использовать для компоновки. В качестве примера рассмотрим этот код с плохой практикой, который использует таблицы для компоновки:
.topbar { background-color: blue; color:white; width: 100%; }lt;table class="topbar"gt; lt;trgt; lt;tdgt;Site Namelt;/tdgt; lt;tdgt;lt;labelgt;Search: lt;input type="search" /gt;lt;/labelgt;lt;/tdgt; lt;/trgt; lt;/tablegt;Это похоже на верхнюю панель, но читатели экрана могут перепутать ее с таблицей, содержащей фактические данные.
document.querySelectorAll(".collapse__button").forEach(button =gt; { button.addEventListener("click", () =gt; { const collapseContent = button.nextElementSibling; button.classList.toggle("collapse__button--active"); if (button.classList.contains("collapse__button--active")) { collapseContent.style.maxHeight = collapseContent.scrollHeight "px"; } else { collapseContent.style.maxHeight = 0; } }); }); .collapse__button { /* display: inline-block; */ padding: 1em 2em; background: var(--clr-dark); color: var(--clr-light); text-decoration: none; cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: 2px; font-weight: var(--fw-bold); transition: transform 200ms ease-in-out; max-width: 200px; margin: 5em 5em; border: 8px var(--clr-accent); border-radius: 20px; } #wrapper { display: table; } .container { display: table-row; } .collapse { display: table-cell; } .collapse__button:hover { transform: scale(1.1); background: var(--clr-accent); } .collapse__button::after { content: "25be"; float: right; transform: scale(1); } .collapse__content { overflow: hidden; max-height: 0; transition: max-height 0.2s; padding: 0 15px; } .collapse__button--active::after { content: "25b4"; } .Title { text-align: center; } lt;section class="Title"gt; lt;pgt; Title of Examplelt;/pgt; lt;div id="wrapper"gt; lt;div class="container"gt; lt;div class="collapse"gt; lt;button class="collapse__button"gt; Example 1 lt;/buttongt; lt;div class="collapse__content"gt; lt;pgt; writing lt;/pgt; lt;/divgt; lt;/divgt; lt;div class="collapse"gt; lt;button class="collapse__button"gt; Example 2 lt;/buttongt; lt;div class="collapse__content"gt; lt;pgt; more writing lt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/sectiongt; 
Ответ №2:
Попробуйте создать другой div, содержащий Пример 1 и Пример 2. Внутри контейнера отобразите его как FlexBox. Это должно заставить их идти бок о бок.
Вот что я сделал:
document.querySelectorAll(".collapse__button").forEach(button =gt;{ button.addEventListener("click", () =gt;{ const collapseContent = button.nextElementSibling; button.classList.toggle("collapse__button--active"); if (button.classList.contains("collapse__button--active")){ collapseContent.style.maxHeight = collapseContent.scrollHeight "px"; }else{ collapseContent.style.maxHeight = 0; } }); }); .collapse__button { /* display: inline-block; */ padding: 1em 2em ; background: var(--clr-dark); color: var(--clr-light); text-decoration: none; cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: 2px; font-weight: var(--fw-bold); transition: transform 200ms ease-in-out; max-width: 200px; margin: 5em 5em; border: 8px var(--clr-accent); border-radius: 20px; } .collapse__button:hover{ transform: scale(1.1); background: var(--clr-accent); } .collapse__button::after{ content: "25be"; float: right; transform: scale(1); } .collapse__content{ overflow: hidden; max-height: 0; transition: max-height 0.2s; padding: 0 15px; } .collapse__button--active::after{ content: "25b4"; } .Title{ text-align: center; } .container { display: flex; justify-content: center; } lt;section class = "Title"gt; lt;pgt; Title of Examplelt;/pgt; lt;div class="container"gt; lt;div class = "collapse"gt; lt;button class = "collapse__button"gt; Example 1 lt;/buttongt; lt;div class="collapse__content"gt; lt;pgt; writing lt;/pgt; lt;/divgt; lt;/divgt; lt;div class = "collapse"gt; lt;button class = "collapse__button"gt; Example 2 lt;/buttongt; lt;div class="collapse__content"gt; lt;pgt; more writing lt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/sectiongt; Ответ №3:
document.querySelectorAll(".collapse__button").forEach(button =gt;{ button.addEventListener("click", () =gt;{ const collapseContent = button.nextElementSibling; button.classList.toggle("collapse__button--active"); if (button.classList.contains("collapse__button--active")){ collapseContent.style.maxHeight = collapseContent.scrollHeight "px"; }else{ collapseContent.style.maxHeight = 0; } }); }); .collapse__button { /* display: inline-block; */ padding: 1em 2em ; background: var(--clr-dark); color: var(--clr-light); text-decoration: none; cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: 2px; font-weight: var(--fw-bold); transition: transform 200ms ease-in-out; max-width: 200px; margin: 5em 5em; border: 8px var(--clr-accent); border-radius: 20px; } .collapse__button:hover{ transform: scale(1.1); background: var(--clr-accent); } .collapse__button::after{ content: "25be"; float: right; transform: scale(1); } .collapse__content{ overflow: hidden; max-height: 0; transition: max-height 0.2s; padding: 0 15px; } .collapse__button--active::after{ content: "25b4"; } .Title{ text-align: center; } .container { display: flex; } lt;section class = "Title"gt; lt;pgt; Title of Examplelt;/pgt; lt;div class="container"gt; lt;div class = "collapse"gt; lt;button class = "collapse__button"gt; Example 1 lt;/buttongt; lt;div class="collapse__content"gt; lt;pgt; writing lt;/pgt; lt;/divgt; lt;/divgt; lt;div class = "collapse"gt; lt;button class = "collapse__button"gt; Example 2 lt;/buttongt; lt;div class="collapse__content"gt; lt;pgt; more writing lt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; Ты хорошо справился. Просто оберните две сворачивающиеся секции (также называемые компонентом аккордеона) контейнером div и создайте этот контейнер в CSS flexbox. Что я и сделал для вас в вашем коде. Дж. С. Мне не нужно было прикасаться.