@Maks1995

Не срабатывает Аккардион для сайта как исправить?

Не срабатывает код!
<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
  • Вопрос задан
  • 65 просмотров
Решения вопроса 1
bazilio2010
@bazilio2010
Мужчина
вот самая простейшая версия

https://codepen.io/anon/pen/BbKaJE
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

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