<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<p> <a target="_blank" href="https://codepen.io/thinsoldier/pen/QOobYX"><button>Click Here To See The Vanilla JS Version</button></a> </p>
<ul class="accordion">
<li class="accordion-section">
<header class="accordion-header js-accordion-control">First Button</header>
<div class="js-accordion-content is-hidden">
<div class="accordion-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores sapiente enim aspernatur ipsa quibusdam molestias fuga consectetur omnis assumenda adipisci ad earum architecto doloremque dolor natus. Enim mollitia a voluptatum.</p>
<p class="test"> test div of fixed size </p>
<p>The last words.</p>
</div>
</div>
</li>
<li class="accordion-section">
<header class="accordion-header js-accordion-control">First Button</header>
<div class="js-accordion-content is-hidden">
<div class="accordion-text">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, perspiciatis inventore neque earum, accusamus ex suscipit fuga et consectetur facilis perferendis! Eum doloremque optio temporibus ad quis autem rerum modi?
</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, perspiciatis inventore neque earum, accusamus ex suscipit fuga et consectetur facilis perferendis! Eum doloremque optio temporibus ad quis autem rerum modi?
</p>
</div>
</li>
</ul>
</body>
</html>
button { font-size: 1em; margin: 1em; }
p { margin: 0 0 1em 0; }
.test{
background: red;
height: 200px;
width: 100px;
}
.accordion {
background-color: #666;
list-style-type: none;
margin:0;
padding:0;
border-radius: 15px;
padding: 1em;
}
.accordion-section {
padding-bottom: 1em;
}
.accordion-section:last-child {
padding-bottom: 0em;
}
.accordion-header {
background: #a3a3a3;
border-radius: 5px;
padding: 10px;
}
.js-accordion-content {
transition: 1s;
overflow: hidden;
}
.is-hidden {
max-height: 0;
min-height: 0;
}
.is-visible {
/*
use the css variable --expanded if it is
set in the style attribute of the html
otherwise use the fallback number.
*/
max-height: var(--expanded, 70px);
min-height: var(--expanded, 70px);
}
.accordion-text {
color: #fff;
padding: 1em 1em 0 1em;
}
// Measure all content elements and assign their height to a css variable in the style attribute of the html.
function measureAccordionContents( index, element ) {
var contentHeight = $(element).find('.accordion-text').outerHeight();
console.log(contentHeight);
element.style.setProperty('--expanded' , contentHeight + 'px');
}
$('.js-accordion-content').each( measureAccordionContents );
function accordionEventHandler( clickEvent )
{
clickEvent.preventDefault();
var clickedItem = clickEvent.target;
var text = $(clickedItem).parent().find('.js-accordion-content');
text.toggleClass( 'is-visible').toggleClass( 'is-hidden' );
}
$(".js-accordion-control").click( accordionEventHandler );
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.