JSFiddle - React, Tailwind, and code Playground

by stedman

HTML

<body class="no-js">
    <div role="main">
        <h1>CSS3 Show-Hide with Transition</h1>
        <p>Lorem ipsum 1.</p>
        <a href="#countriesList" class="trigger">Countries</a>
        <div id="countriesList" class="target">
            <ul>
                <li>U.S.A.</li>
                <li>Canada</li>
                <li>Mexico</li>
            </ul>
        </div>
        <p>Lorem ipsum 2.</p>
    </div>
</body>

CSS

@-webkit-keyframes grow {
	from { 
		max-height: 0; 
	}
	to { 
		max-height: 5em; 
	}
}

.js .target {
	overflow: hidden;
}
.js .target.hide {
    display: none;
	max-height: 0;
 }
/* change the nature of 'hide' if animation works */
.js .target.anim.hide {
    -webkit-animation: grow .25s reverse;
	   -moz-animation: grow .25s reverse;
	    -ms-animation: grow .25s reverse;
	     -o-animation: grow .25s reverse;
	        animation: grow .25s reverse;
    display: inherit;
}
.js .target.show {
	-webkit-animation: grow .5s;
	   -moz-animation: grow .5s;
	    -ms-animation: grow .5s;
	     -o-animation: grow .5s;
	        animation: grow .5s;
	display: block;
    max-height: 5em;
}

JavaScript

(function(){
    var animationend = "webkitAnimationEnd oAnimationEnd MSAnimationEnd";
    var $target = $(".target");
	// simulate modernizr
	$("body").toggleClass("no-js js");

    $target
        .addClass("hide")
        .attr("aria-hidden", "true")
        // change the nature of 'hide' if animation works
        .on(animationend, function(ev) {
            $(this).addClass("anim");
            
            //add the first time only            
            //.on(animationend, function(ev) {
            //   $(this).css("display", "none");
            //}) 
        })
        ;
    
	$(".trigger")
        // add ARIA
        .attr("role", "button")
	    .attr("aria-controls", "myDetails")
	    .attr("aria-expanded", "false")
	    // add event handler and functionality
	    .on("click", function(ev) {
            ev.preventDefault();
            
            // toggle ARIA state      
            $(this)
                .attr("aria-expanded", function(idx, val) {
                    return (val === "true") ? "false" : "true";
                })
                ;
            
            $target
                // toggle hide/show class
                .toggleClass("show hide")
                // toggle ARIA hidden
                .attr("aria-hidden", function(idx, val) {
                    return (val === "true") ? "false" : "true";
                })
                ;
        })
        ;
}());