Я пытаюсь распечатать две колонки аккордеонов с функциями js, экспериментируя с новыми (для меня) методами. Проблема, которую я не знаю, как решить, состоит в том, что мои столбцы странно ломаются слева, вызывая ошибку, при которой, если вы нажмете на последний слева, а затем на первый справа, он не будет активирован, как следует,
Мой код:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.accordian{
color: red;
text-align: center;
max-width: 50%;
margin: 0 auto;
padding: 1rem;
columns: 2;
}
.accordian dt{
border: blue solid .1rem;
border-radius: 10px;
display: block;
background-color: blueviolet;
min-height: 3rem;
margin: 0 auto 10px auto;
break-inside: avoid;
width: 100%;
break-after: avoid-page;
}
.accordian dd{
display: block;
border: red solid .2rem;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
height: 6rem;
width: 95%;
margin: -11px auto 10px auto;
break-inside: avoid;
break-after: avoid-page;
}
span{
width: 100%;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
var address = "220 louise st. Bonne Terre Mo";
var states = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]
document.write('<dl class="accordian">');
for (var i = 0; i < states.length; i++){
document.write(
"<dt><span>"+states[i]+"</span></dt><dd>"+address+"</dd>")
}
document.write("</dl>");
($(document).ready(function($){
var panels = $('.accordian > dd').hide();
panels.first().show();
$('.accordian > dt > span').click(function(){
var Thethis = $(this);
panels.slideUp();
Thethis.parent().next().slideDown();
$('.accordian > dt').css({backgroundColor: "blueviolet"});
Thethis.parent().css({backgroundColor: "green"});
return false;
}
)}
))
</script>
</body>
</html>
Как вы заметите, я готов использовать break-inside: avoid; без радости. Если кто-то может помочь мне с этим, я был бы очень благодарен.