Skip to content

Instantly share code, notes, and snippets.

@Retter241

Retter241/faq_section.html

Last active April 29, 2021 07:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Retter241/a2bd28f8bb1b01ea3bc5c64eae702ee9 to your computer and use it in GitHub Desktop.
Save Retter241/a2bd28f8bb1b01ea3bc5c64eae702ee9 to your computer and use it in GitHub Desktop.
Download ZIP
Faq block ( front )
Raw
faq_section.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.content-blocks {
margin-bottom: 40px
}
.acc-block {
margin-bottom: 20px;
background: #fff;
-webkit-box-shadow: 0 0 40px rgba(0,0,0,.15);
box-shadow: 0 0 40px rgba(0,0,0,.15)
}
.acc-block__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: 0;
cursor: pointer;
-webkit-transition: padding-bottom .5s linear;
-o-transition: padding-bottom .5s linear;
transition: padding-bottom .5s linear
}
.acc-block__title {
padding: 25px 50px;
max-width: 80%;
width: 100%;
font-family: Montserrat-Bold
}
.acc-block__icon {
position: relative;
margin: 0 50px 0 0;
cursor: pointer
}
.acc-block__icon svg {
width: 34px;
height: 34px;
-webkit-transition: -webkit-transform .5s linear;
transition: -webkit-transform .5s linear;
-o-transition: transform .5s linear;
transition: transform .5s linear;
transition: transform .5s linear,-webkit-transform .5s linear
}
.acc-block__link.active {
padding-bottom: 25px
}
.acc-block__link.active .acc-block__icon {
background: 0 0
}
.acc-block__link.active .acc-block__icon svg {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg)
}
.acc-block__link.active .acc-block__icon::after {
background: #fac336
}
.acc-block__content {
display: none;
margin: 0 50px;
padding: 25px 0;
font-size: 1rem;
border-top: 2px solid #ff9d76
}
.acc-block__content a {
display: block;
padding-top: 20px;
color: #ff9d76;
text-transform: uppercase;
font-family: Montserrat-Bold
}
.acc-block__content a:hover {
text-decoration: none
}
</style>
</head>
<body>
<p class="description">Используется JQ</p>
<div class="accordeon accordeon-js">
<div class="faq_item">
<div class="acc-block__link acc-head-js ">
<div class="acc-block__title ">
Заголовок 1
</div>
<div class="acc-block__icon">
<svg class="header-search__icon" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L5 5L9 1" stroke="#ff9d76"></path>
</svg></div>
</div>
<div class="acc-block__content acc-body-js">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum saepe ex nesciunt, quidem quis illo cupiditate,
quod maxime. Tenetur, ex quos. Magnam quasi iure facere minus velit voluptate accusamus hic!
</div>
</div>
<div class="faq_item">
<div class="acc-block__link acc-head-js ">
<div class="acc-block__title ">
Заголовок 1
</div>
<div class="acc-block__icon">
<svg class="header-search__icon" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L5 5L9 1" stroke="#ff9d76"></path>
</svg></div>
</div>
<div class="acc-block__content acc-body-js">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum saepe ex nesciunt, quidem quis illo cupiditate,
quod maxime. Tenetur, ex quos. Magnam quasi iure facere minus velit voluptate accusamus hic!
</div>
</div>
<div class="faq_item">
<div class="acc-block__link acc-head-js ">
<div class="acc-block__title ">
Заголовок 1
</div>
<div class="acc-block__icon">
<svg class="header-search__icon" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L5 5L9 1" stroke="#ff9d76"></path>
</svg></div>
</div>
<div class="acc-block__content acc-body-js">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum saepe ex nesciunt, quidem quis illo cupiditate,
quod maxime. Tenetur, ex quos. Magnam quasi iure facere minus velit voluptate accusamus hic!
</div>
</div>
</div>
<!-- /.accordion -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
//<accordeon>---------------------------------------
$(document).ready(function (e) {
$('.acc-head-js').on('click', function (e) {
$('.acc-body-js').not($(this).next()).slideUp(1000);
// $('.acc-head-js').removeClass('active');
$(this).next().slideToggle(1000);
// $(this).toggleClass('active');
$('.accordeon-js .acc-head-js').not($(this)).removeClass('active');
$(this).toggleClass('active');
});
});
//</accordeon>---------------------------------------
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment