Skip to content

Instantly share code, notes, and snippets.

@vjeantet

vjeantet/expander.html

Last active May 22, 2019 21:26
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 vjeantet/c85564c04d57e51f3d2a71239fb1385a to your computer and use it in GitHub Desktop.
Save vjeantet/c85564c04d57e51f3d2a71239fb1385a to your computer and use it in GitHub Desktop.
Download ZIP
html simple text panel expander
Raw
expander.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 14px;
font-weight: 400;
}
.panel-expand * {
line-height: 1.42857143;
letter-spacing: 0;
}
.panel-expand {
background: white;
border: 1px solid hsl(217, 71%, 53%);
border-radius: 5.01px;
margin: 10px 0 20px 0;
padding: 10px 20px;
display: block;
border-spacing: 0;
}
.panel-expand h2 {
color: hsl(217, 71%, 53%);
border-bottom: 1px solid hsl(217, 71%, 53%);
min-width: 60%;
display: inline-block;
margin: 0 0 10px 0;
font-weight: 500;
letter-spacing: -0.008em;
}
.panel-expand div {
background: inherit;
min-height: 1.5em;
position: relative;
height: 0;
overflow: hidden;
}
.panel-expand div.exp {
height: 100%;
overflow: unset;
}
.panel-expand div a {
background: inherit;
bottom: 0;
right: 0;
text-decoration: none;
padding-left: 10px;
cursor: pointer;
color: hsl(217, 71%, 53%);
position: absolute;
}
.panel-expand div.exp a {
position: relative;
}
.panel-expand div a:before {
color: hsl(217, 71%, 53%);
content: "\2026\A0";
}
.panel-expand div.exp a:before {
content: "";
}
</style>
</head>
<body>
<article class="panel-expand">
<h2>Titre du contenu</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus enim molestie, tincidunt odio ut, congue quam. Phasellus congue ex aliquet justo tincidunt porttitor. Suspendisse ultrices aliquet eros, ac auctor mi maximus in. Proin sem erat, mollis mollis ligula eu, pellentesque ultricies felis. Sed nisl nibh, ultrices in felis eget, gravida commodo magna. Aenean lacinia velit eget velit tristique, sit amet fermentum sem congue. Etiam sit amet volutpat nunc. Duis sit amet nibh justo. Vestibulum lectus mauris, iaculis ut odio sed, ultrices dignissim nibh. Aenean rutrum elementum leo, pellentesque varius leo vulputate vel. Nulla ultricies nulla sit amet diam rhoncus, quis pretium leo rhoncus. Mauris placerat felis vel risus faucibus condimentum. Phasellus augue augue, mollis at ante sed, sodales vehicula erat.
<a onclick="e=this;if (e.parentNode.classList.toggle('exp') === true) {e.textContent = e.getAttribute('data-min')}else{e.textContent = e.getAttribute('data-max')}" data-max="Afficher plus" data-min="Afficher moins"><span>Afficher plus</span></a>
</div>
</article>
</body>
</html>
@vjeantet
Copy link
Author

image

image

@vjeantet
Copy link
Author 

        <script type="text/javascript">
        
$('<article/>', {
    'id':'myDiv',
    'class':'panel-expand',
    'html':'<h2>Titres du contenu</h2><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus enim molestie, tincidunt odio ut, congue quam. Phasellus congue ex aliquet justo tincidunt porttitor. Suspendisse ultrices aliquet eros, ac auctor mi maximus in. Proin sem erat, mollis mollis ligula eu, pellentesque ultricies felis. Sed nisl nibh, ultrices in felis eget, gravida commodo magna. Aenean lacinia velit eget velit tristique, sit amet fermentum sem congue. Etiam sit amet volutpat nunc. Duis sit amet nibh justo. Vestibulum lectus mauris, iaculis ut odio sed, ultrices dignissim nibh. Aenean rutrum elementum leo, pellentesque varius leo vulputate vel. Nulla ultricies nulla sit amet diam rhoncus, quis pretium leo rhoncus. Mauris placerat felis vel risus faucibus condimentum. Phasellus augue augue, mollis at ante sed, sodales vehicula erat.<a data-max="Afficher plus" data-min="Afficher moins"><span>Afficher plus</span></a></div>',
}).prependTo('body');

$(".panel-expand div a").click(function(){e=this; if (e.parentNode.classList.toggle("exp") === true) {e.textContent = e.getAttribute("data-min")}else{e.textContent = e.getAttribute("data-max")}});

    </script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment