1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143
| <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Progressiv_Div</title>
<style>
* {
box-sizing: border-box;
}
body {
background-color: #383737;
}
.conteneur{
display:inline-block;
vertical-align:top;
}
.dv {
transition: height .80s ease-in;
overflow: hidden;
max-width: 480px;
border: 1px solid grey;
font-size: 1em;
color: #ffffff;
}
h1 {
margin: 0 0 0 10px;
}
p {
padding: 10px;
}
.dv:not(.active) {
display: none;
}
.disabled {
pointer-events: none;
opacity: 0.2;
}
.bouton {
width: 500px;
height: 30px;
font-weight: bold;
text-align:left;
border: none;
background-color: transparent;
cursor: pointer;
color: #0399d4;
font-size: 1em;
}
@media screen and (max-width: 1000px) {
.dv,.bouton{
max-width: 350px;
}
}
</style>
</head>
<body>
<div class="conteneur">
<button class="bouton">Ouvrir le cadre...</button>
<div class="dv">
<h1>contenu #1</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry s standard dummy text ever <strong>since the 1500s</strong>, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
<div class="conteneur">
<button class="bouton">Ouvrir le cadre...</button>
<div class="dv">
<h1>contenu #2</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
<div class="conteneur">
<button class="bouton">Ouvrir le cadre...</button>
<div class="dv">
<h1>contenu #3</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
<script>
let prg, timer = [], heights = []
prg = function (x) {
let that = this
that.openClose = function () {
if (!that.div.classList.contains('active')) {
that.div.classList.add('active')
that.bout.innerText = 'Fermer le cadre...'
that.div.style.height = 'auto'
heights[x] = `${that.div.clientHeight}px`
that.div.style.height = '0px'
timer[x] = setTimeout(function () {
that.div.style.height = heights[x]
}, 0)
} else {
that.bout.classList.add('disabled')
that.div.style.height = '0px'
that.div.addEventListener('transitionend', function () {
that.div.classList.remove('active')
that.bout.classList.remove('disabled')
that.bout.innerText = 'Ouvrir le cadre...'
}, {
once: true
})
}
}
}
document.querySelectorAll('.bouton').forEach((boutonSelect, index) => {
boutonSelect.addEventListener('click', function (event) {
event.preventDefault();
let nprg = new prg(index)
nprg.div = document.querySelectorAll('.dv')[index]
nprg.bout = boutonSelect
nprg.openClose(index)
})
})
onresize = (event) => {
for (let divs of document.querySelectorAll('.dv')) {
divs.style.height = 'auto';
divs.style.height = divs.clientHeight + 'px'
}
}
</script>
</body>
</html> |
Partager