Skip to content

Instantly share code, notes, and snippets.

@kharakhordindemo

kharakhordindemo/index.html

Created December 6, 2017 14:31
Show Gist options
  • Save kharakhordindemo/0c649716256ee4a3c340f775ccef20d4 to your computer and use it in GitHub Desktop.
Save kharakhordindemo/0c649716256ee4a3c340f775ccef20d4 to your computer and use it in GitHub Desktop.
Download ZIP
Аккордеон
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Аккордеон</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<h1>Section One</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et sunt voluptates eveniet rem? Quaerat magni recusandae corporis amet hic autem odio, delectus facilis maxime dicta deleniti nihil praesentium ipsum eum laboriosam quod. Animi impedit odit minima reprehenderit perferendis commodi consequuntur velit, pariatur reiciendis corrupti esse est provident soluta adipisci accusantium!</article>
<h1>Section Two</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et sunt voluptates eveniet rem? Quaerat magni recusandae corporis amet hic autem odio, delectus facilis maxime dicta deleniti nihil praesentium ipsum eum laboriosam quod. Animi impedit odit minima reprehenderit perferendis commodi consequuntur velit, pariatur reiciendis corrupti esse est provident soluta adipisci accusantium!</article>
<h1>Section Three</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et sunt voluptates eveniet rem? Quaerat magni recusandae corporis amet hic autem odio, delectus facilis maxime dicta deleniti nihil praesentium ipsum eum laboriosam quod. Animi impedit odit minima reprehenderit perferendis commodi consequuntur velit, pariatur reiciendis corrupti esse est provident soluta adipisci accusantium!</article>
</div>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$('.wrapper>article').not(':first').hide();
$('.wrapper>h1').click(function() {
var findArticle = $(this).next('article');
var findWrapper = $(this).closest('.wrapper');
if (findArticle.is(':visible')) {
findArticle.slideUp(500);
} else {
findWrapper.find('>article').slideUp(500);
findArticle.slideDown(500);
}
});//end click
});//end ready
</script>
</body>
</html>
Raw
style.css
/*---Сброс стилей---*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, big, em, font, img, small, strong, sub, sup, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate; border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
strong,b{
font-weight:bold
}
em{
font-style:italic
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
*{
box-sizing: border-box;
}
/*---Конец сброса стилей---*/
/*---Аккордеон---*/
body{
background-color: #858d95;
}
.wrapper{
margin: 50px auto 0 auto;
width: 640px;
}
.wrapper h1{
margin-top: 10px;
padding: 10px 20px;
text-align: center;
font-family: "Arial", sans-serif;
background-color: #ba6fa0;
color: #fff;
border-radius: 5px 5px 0 0;
cursor: pointer;
transition: all 0.5s;
}
.wrapper h1:hover{
background-color: #9b5b85;
color: #000;
}
.wrapper h1:first-child{
margin-top: 0;
}
.wrapper article{
padding: 10px;
font-family: "Arial", sans-serif;
background-color: #caddef;
border-radius: 0 0 5px 5px;
}
/*---Аккордеон конец---*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment