Не срабатывает код!
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="accordion">
<span>Lorem1</span>
<div>LoremLoremLoremLoremLoremLoremLorem</div>
<span>Lorem2</span>
<div>LoremLoremLoremLoremLoremLoremLorem</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
.accordion {
border: 1px solid transparent;
border-radius: 10px;
overflow: hidden;
}
.accordion_control {
display: block;
padding: 3px 10px;
background-color: #19365f;
color: #fff;
text-decoration: none;
}
.accordion_control:nover,
.accordion_control:focus {
background-color: rgba(26, 101, 174, 0.7);
outline: none;
}
.accordion_control::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
border: 1px solid #fff;
border-width 1px 1px 0 0;
transform: translateY(-25%) rotate(135deg);
}
.accordion_control_active {
background-color: #1a65ae;
border-bottom: 1px solid #19365f;
}
.accordion_control_active::before {
transform: translateY(25%) rotate(-45deg);
}
.accordion_panel_active {
display: block;
}
.accordion_panel {
display: none;
padding: 10px;
background-color: #1a65ae;
color: #fff;
}
function accordion(selector) {
let accordion = $(selector);
let spans = accordion.children('span');
let divs = accordion.children('div');
accordion
.addClass('accordion')
.on('click', '.accordion_control', function (e) {
e.preventDefault();
let a = $(this);
let active = a.hasClass('accordion_control_active');
accordion
.find('.accordion_control_active')
.removeClass('accordion_control_active');
accordion
.find('.accordion_panel_active')
.removeClass('accordion_panel_active');
if (!active) {
a
.addClass('accordion_control_active')
.next()
.addClass('accordion_panel_active');
}
});
spans.each(function () {
let span = $(this);
span.replaceWith(
'<a href="#" class="accordion_control">'
+ span.text()
+ '</a>'
);
});
divs.addClass('accordion_panel');
}
accordion('#accordion');
Нашел еще одно решение в интернете
https://codepen.io/Makintoh/pen/MxybpZ