28.07.2018, 16:56
|
|
Новичок на форуме
|
|
Регистрация: 28.07.2018
Сообщений: 2
|
|
|
Нужна помощь с аккордеоном. Сворачивание вкладок при открытии другой, смена стрелки.
Добрый день всем!) Нужна помощь с аккордеоном. Необходимо, чтоб при сворачивании остальных вкладок, кроме открытой у них возвращалось исходное состояние псевдоэлемента "after" (галочка). Прилагаю код, ибо сам не могу понять как это реализовать 
Ссылка на лайв-версию. (Аккордеон в самом конце).
<div class="col-lg-6">
<div class="accordition_menu">
<h2 class="accordition_heading accordition_heading_1">
Photography
</h2>
<div class="accordition_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<h2 class="accordition_heading accordition_heading_2">
Creativity
</h2>
<div class="accordition_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<h2 class="accordition_heading accordition_heading_3">
Web design
</h2>
<div class="accordition_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
$(document).ready(function(){
$('.accordition_menu').find('h2').click(
function(){$(this).next().stop().slideToggle(500)}).next().stop().hide()}
);
$('.accordition_menu h2').click(
function(){$(this).parent().find('div').hide(500), $(this).find('div').slideDown()}
);
CSS:
|
Код:
|
.accordition_menu {
margin-left: 30px;
}
.accordition_heading {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
padding: 15px 10px 15px 25px;
border: 1px solid #e5e5e5;
cursor: pointer;
font-size: 14px;
margin-bottom: 16px;
}
.accordition_heading_1::before, .accordition_heading_2::before, .accordition_heading_3::before {
content: "";
position: relative;
height: 48px;
width: 32px;
right: 10px;
float: left;
bottom: 16px;
}
.accordition_heading_1::before {
background: url(../img/picture_icon.png) no-repeat center;
}
.accordition_heading_2::before {
background: url(../img/equalizer.png) no-repeat center;
}
.accordition_heading_3::before {
background: url(../img/bullseye.png) no-repeat center;
}
.accordition_heading::after {
content: "";
position: relative;
background: url(../img/arrow_down.png) no-repeat center;
height: 48px;
width: 22px;
bottom: 16px;
float: right;
transition: 0.3s;
}
.accordition_heading.in:after {
transform: rotate(180deg);
}
.accordition_content {
font-family: 'Roboto', sans-serif;
font-style: italic;
padding: 11.5px 15px 11.5px 15px;
width: 510px;
border: 1px solid #e5e5e5;
margin-bottom: 16px;
} |
|
|
28.07.2018, 17:46
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
 тема открывашка будет вечной ... |
|
28.07.2018, 18:03
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
открывашка смена стрелки
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<base href="https://corp-adv.com/test/" />
<link rel="stylesheet" href="css/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var accordition = $(".accordition_menu"),
btn = $("> h2", accordition),
content = $("> .accordition_content", accordition);
accordition.on("click", "> h2", function() {
var el = $(this);
btn.not(el.toggleClass("in")).removeClass("in");
content.stop().not(el.next().slideToggle(500)).slideUp();
})
});
</script>
</head>
<body>
<div class="col-lg-6">
<div class="accordition_menu">
<h2 class="accordition_heading accordition_heading_1">
Photography
</h2>
<div class="accordition_content accordition_visible" style="height: 192.6px; padding: 11.5px 14.9927px; margin: 0px 0px 16px; width: 509.67px; opacity: 0.999359; display: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<h2 class="accordition_heading accordition_heading_2">
Creativity
</h2>
<div class="accordition_content" style="height: 192.6px; padding: 11.5px 14.9963px; margin: 0px 0px 16px; width: 509.824px; opacity: 0.999664; display: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<h2 class="accordition_heading accordition_heading_3">
Web design
</h2>
<div class="accordition_content" style="height: 192.6px; padding: 11.5px 14.9999px; margin: 0px 0px 16px; width: 509.978px; opacity: 0.999951; display: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>
|
|
28.07.2018, 18:22
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
|
|
28.07.2018, 18:32
|
|
Новичок на форуме
|
|
Регистрация: 28.07.2018
Сообщений: 2
|
|
Сообщение от рони
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<base href="https://corp-adv.com/test/" />
<link rel="stylesheet" href="css/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var accordition = $(".accordition_menu"),
btn = $("> h2", accordition),
content = $("> .accordition_content", accordition);
accordition.on("click", "> h2", function() {
var el = $(this);
btn.not(el.toggleClass("in")).removeClass("in");
content.stop().not(el.next().slideToggle(500)).slideUp();
})
});
</script>
</head>
<body>
<div class="col-lg-6">
<div class="accordition_menu">
<h2 class="accordition_heading accordition_heading_1">
Photography
</h2>
<div class="accordition_content accordition_visible" style="height: 192.6px; padding: 11.5px 14.9927px; margin: 0px 0px 16px; width: 509.67px; opacity: 0.999359; display: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<h2 class="accordition_heading accordition_heading_2">
Creativity
</h2>
<div class="accordition_content" style="height: 192.6px; padding: 11.5px 14.9963px; margin: 0px 0px 16px; width: 509.824px; opacity: 0.999664; display: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<h2 class="accordition_heading accordition_heading_3">
Web design
</h2>
<div class="accordition_content" style="height: 192.6px; padding: 11.5px 14.9999px; margin: 0px 0px 16px; width: 509.978px; opacity: 0.999951; display: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>
|
Спасибо большое, сейчас попробую!) Ну а что к чему и зачем уже сам допереть попробую)
|
|
|
|
