В настоящее время я делаю проект, который требует от меня довольно большой формы.Мне пришлось разделить его на несколько отдельных разделов, но я хотел, чтобы они оставались на одном сайте.Поэтому я решил пойти с методом аккордеона.Я поместил это непосредственно в форму.Мне пришлось разделить содержимое еще дальше, поэтому я создал TabPanels, вложенные в одну из кнопок аккордеона.IMHO выглядит довольно аккуратно, но ...
Похоже, что панели содержимого на этих вкладках не отображаются должным образом.Я предполагаю, что она берет высоту панели с открытой вкладки по умолчанию и использует ее на каждой вкладке.Другие вкладки имеют больше контента, и это просто приводит к проблемам переполнения (текст сокращен).Чтобы сделать эту функцию, вы должны закрыть аккордеон, пока отображается самая большая вкладка контента.Когда вы открываете его снова, все работает как шарм.Технически я мог бы поменять вкладку, которая открыта по умолчанию, но в данном случае это невозможно, и это просто обходной путь.
Буду очень признателен, если вы поможете мне исправить это.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
}
else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
})
}
function Open(evt, Order) {
var i, tablinks, tabcontent;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" current", "");
}
document.getElementById(Order).style.display = "block";
evt.currentTarget.className += " current"; //add another className
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
body {
font-family: 'Barlow', sans-serif !important;
color: #000000;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: center;
outline: none;
font-size: 15px;
transition: 0.4s;
margin: auto;
display: block;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
text-align: center;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.current {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
justify-content: left;
}
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="TabsInAccordionInForm.css" hreflang="UTF-8" media="screen"/>
</head>
<body>
<form>
<button type="button" class="accordion">First</button> <!-- first accordion beginning -->
<div class="panel">
<div class="tab"> <!-- tab links -->
<button type="button" class="tablinks" id="defaultOpen" onclick="Open(event, 'Uno')">Uno</button>
<button type="button" class="tablinks" id="kp" onclick="Open(event, 'Dos')">Dos</button>
<button type="button" class="tablinks" id="p" onclick="Open(event, 'Tres')">Tres</button>
</div>
<div class="tabcontent" id="Uno"> <!-- first tab content beginning -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis nec urna at convallis.
Quisque a viverra arcu, vel fringilla libero. Nulla nec volutpat sapien. Suspendisse quis placerat diam,
sed suscipit dolor. Phasellus ullamcorper rutrum metus, a porttitor massa consequat vitae.
Curabitur bibendum mollis ex vel faucibus. Aliquam enim odio, dictum sit amet rutrum id, consequat ut diam.
Nullam porta metus vel lorem vulputate tempor. Nullam non ipsum quis magna posuere pharetra ut ut massa.
Ut laoreet, lorem vel tincidunt vestibulum, nisi urna venenatis libero, vitae porttitor leo nunc volutpat lacus.
Nam viverra ut libero scelerisque tempor. In risus nulla, facilisis eget mauris ac, luctus gravida ante.
Nunc vitae accumsan ligula, vitae imperdiet nibh.
</p>
</div> <!-- first tab content ending -->
<div class="tabcontent" id="Dos"> <!-- second tab content beginning -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis nec urna at convallis.
Quisque a viverra arcu, vel fringilla libero. Nulla nec volutpat sapien. Suspendisse quis placerat diam,
sed suscipit dolor. Phasellus ullamcorper rutrum metus, a porttitor massa consequat vitae.
Curabitur bibendum mollis ex vel faucibus. Aliquam enim odio, dictum sit amet rutrum id, consequat ut diam.
Nullam porta metus vel lorem vulputate tempor. Nullam non ipsum quis magna posuere pharetra ut ut massa.
Ut laoreet, lorem vel tincidunt vestibulum, nisi urna venenatis libero, vitae porttitor leo nunc volutpat lacus.
Nam viverra ut libero scelerisque tempor. In risus nulla, facilisis eget mauris ac, luctus gravida ante.
Nunc vitae accumsan ligula, vitae imperdiet nibh.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis nec urna at convallis.
Quisque a viverra arcu, vel fringilla libero. Nulla nec volutpat sapien. Suspendisse quis placerat diam,
sed suscipit dolor. Phasellus ullamcorper rutrum metus, a porttitor massa consequat vitae.
Curabitur bibendum mollis ex vel faucibus. Aliquam enim odio, dictum sit amet rutrum id, consequat ut diam.
Nullam porta metus vel lorem vulputate tempor. Nullam non ipsum quis magna posuere pharetra ut ut massa.
Ut laoreet, lorem vel tincidunt vestibulum, nisi urna venenatis libero, vitae porttitor leo nunc volutpat lacus.
Nam viverra ut libero scelerisque tempor. In risus nulla, facilisis eget mauris ac, luctus gravida ante.
Nunc vitae accumsan ligula, vitae imperdiet nibh.
</p>
</div> <!-- second tab content ending -->
<div class="tabcontent" id="Tres"> <!-- third tab content beginning -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis nec urna at convallis.
Quisque a viverra arcu, vel fringilla libero. Nulla nec volutpat sapien. Suspendisse quis placerat diam,
sed suscipit dolor. Phasellus ullamcorper rutrum metus, a porttitor massa consequat vitae.
Curabitur bibendum mollis ex vel faucibus. Aliquam enim odio, dictum sit amet rutrum id, consequat ut diam.
Nullam porta metus vel lorem vulputate tempor. Nullam non ipsum quis magna posuere pharetra ut ut massa.
Ut laoreet, lorem vel tincidunt vestibulum, nisi urna venenatis libero, vitae porttitor leo nunc volutpat lacus.
Nam viverra ut libero scelerisque tempor. In risus nulla, facilisis eget mauris ac, luctus gravida ante.
Nunc vitae accumsan ligula, vitae imperdiet nibh.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis nec urna at convallis.
Quisque a viverra arcu, vel fringilla libero. Nulla nec volutpat sapien. Suspendisse quis placerat diam,
sed suscipit dolor. Phasellus ullamcorper rutrum metus, a porttitor massa consequat vitae.
Curabitur bibendum mollis ex vel faucibus. Aliquam enim odio, dictum sit amet rutrum id, consequat ut diam.
Nullam porta metus vel lorem vulputate tempor. Nullam non ipsum quis magna posuere pharetra ut ut massa.
Ut laoreet, lorem vel tincidunt vestibulum, nisi urna venenatis libero, vitae porttitor leo nunc volutpat lacus.
Nam viverra ut libero scelerisque tempor. In risus nulla, facilisis eget mauris ac, luctus gravida ante.
Nunc vitae accumsan ligula, vitae imperdiet nibh.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis nec urna at convallis.
Quisque a viverra arcu, vel fringilla libero. Nulla nec volutpat sapien. Suspendisse quis placerat diam,
sed suscipit dolor. Phasellus ullamcorper rutrum metus, a porttitor massa consequat vitae.
Curabitur bibendum mollis ex vel faucibus. Aliquam enim odio, dictum sit amet rutrum id, consequat ut diam.
Nullam porta metus vel lorem vulputate tempor. Nullam non ipsum quis magna posuere pharetra ut ut massa.
Ut laoreet, lorem vel tincidunt vestibulum, nisi urna venenatis libero, vitae porttitor leo nunc volutpat lacus.
Nam viverra ut libero scelerisque tempor. In risus nulla, facilisis eget mauris ac, luctus gravida ante.
Nunc vitae accumsan ligula, vitae imperdiet nibh.
</p>
</div> <!-- third tab content ending -->
</div> <!-- first accordion ending -->
<button type="button" class="accordion">Second</button> <!-- second accordion beginning -->
<div class="panel">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis nec urna at convallis.
Quisque a viverra arcu, vel fringilla libero. Nulla nec volutpat sapien. Suspendisse quis placerat diam,
sed suscipit dolor. Phasellus ullamcorper rutrum metus, a porttitor massa consequat vitae.
Curabitur bibendum mollis ex vel faucibus. Aliquam enim odio, dictum sit amet rutrum id, consequat ut diam.
Nullam porta metus vel lorem vulputate tempor. Nullam non ipsum quis magna posuere pharetra ut ut massa.
Ut laoreet, lorem vel tincidunt vestibulum, nisi urna venenatis libero, vitae porttitor leo nunc volutpat lacus.
Nam viverra ut libero scelerisque tempor. In risus nulla, facilisis eget mauris ac, luctus gravida ante.
Nunc vitae accumsan ligula, vitae imperdiet nibh.
</p>
</div> <!-- second accordion ending -->
<button type="button" class="accordion">Third</button> <!-- third accordion beginning -->
<div class="panel">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis nec urna at convallis.
Quisque a viverra arcu, vel fringilla libero. Nulla nec volutpat sapien. Suspendisse quis placerat diam,
sed suscipit dolor. Phasellus ullamcorper rutrum metus, a porttitor massa consequat vitae.
Curabitur bibendum mollis ex vel faucibus. Aliquam enim odio, dictum sit amet rutrum id, consequat ut diam.
Nullam porta metus vel lorem vulputate tempor. Nullam non ipsum quis magna posuere pharetra ut ut massa.
Ut laoreet, lorem vel tincidunt vestibulum, nisi urna venenatis libero, vitae porttitor leo nunc volutpat lacus.
Nam viverra ut libero scelerisque tempor. In risus nulla, facilisis eget mauris ac, luctus gravida ante.
Nunc vitae accumsan ligula, vitae imperdiet nibh.
</p>
</div> <!-- third accordion ending -->
</form>
<script type="text/javascript" src="TabsInAccordionInForm.js"></script>
</body>
</html>
Ниже ссылка на рабочий пример:
https://jsfiddle.net/Tyiliyra/70cv8qpL/10/